Type - CSS-triks | CSS-almanakk 2025

En typevalg (noen ganger referert til som en elementtypevalg) samsvarer med elementene med det tilsvarende elementnodenavnet, for eksempel

, og koder. Typevalg brukes vanligvis til å gjøre "brede strek" -endringer i stilen til et nettsted.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Vanlig bruk

Ofte er Type Selectors angitt som standard, for eksempel i en CSS-tilbakestilling der intensjonen er å overstyre nettleserens standardverdier. Et eksempel fra den første linjen i normalize.css, en populær CSS-tilbakestilling:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Typevalgene ovenfor setter visningsegenskapene til disse kodene for å blokkere, slik at når som helst noen av disse kodene brukes over hele nettstedet, vil de vises som blokker, med mindre de blir overskrevet av en mer spesifikk stil.

Beste praksis

Det er generelt ansett som dårlig praksis å bruke fine detaljendringer med en Type Selector alene. For eksempel vil det sjelden være noe å bruke en "farge: hvit" -egenskap på alle koder. Dette er fordi koder er generiske og brukes på nettsteder for forskjellige formål.

Imidlertid, med en typevalg som å body ( )angi en standard font-size og line-heighter vanlig. Dette skyldes delvis at det bare kan være en tagg på en gitt side, så det er færre muligheter for konflikter.

Type velgerens spesifikasjon og ytelse

Type Selectors er på det laveste nivået av spesifikkaskaskaden (vanligvis skrevet som 0, 0, 0, 1), noe som betyr at nesten alt vil overstyre stilen som brukes via en Type Selector alene, og legge til en Type Selector til en klasse eller ID i CSS gir minimal ekstra spesifisitet.

Type Selectors rangerer også lavere på CSS-effektivitetsskalaen enn klasser og ID-er. Derfor er det teknisk bedre ytelsesvalg å bruke en klasse eller en ID i stedet for den mer generiske Type Selector (selv om den virkelige hastighetsforskjellen vanligvis er ubetydelig).