Type - CSS-tricks | CSS Almanak 2025

En typevælger (undertiden benævnt en elementtypevælger) matcher elementer med det tilsvarende elementnodenavn, f.eks

, og tags. Typevælgere bruges normalt til at foretage ændringer i "bred streg" i stilen på et websted.

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

Almindelig anvendelse

Ofte indstilles Type Selectors som standardindstillinger, f.eks. I en CSS-nulstilling, hvor hensigten er at tilsidesætte browserens standardindstillinger. Et eksempel fra den første linje i normalize.css, en populær CSS-nulstilling:

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

Typevælgerne ovenfor indstiller displayegenskaberne for disse tags til at blokere, så når som helst et af disse tags bruges overalt på webstedet, vises de som blok, medmindre de overskrives af en mere specifik stil.

Bedste praksis

Det anses generelt for dårlig praksis at anvende ændringer i fine detaljer med en typevælger alene. For eksempel ville det sjældent være nyttigt at bruge en "farve: hvid" -egenskab på alle tags på ethvert websted. Dette skyldes, at tags er generiske og bruges overalt på websteder til forskellige formål.

Men med en typevælger som f.eks body ( ). Indstilling af en standard font-size og line-heighter almindelig. Dette skyldes delvis, at der kun kan være et tag på en given side, så der er færre muligheder for konflikter.

Type Selector Specificitet og ydeevne

Type Selectors er på det laveste niveau af specificitetskaskaden (normalt skrevet som 0, 0, 0, 1), hvilket betyder, at næsten alt vil tilsidesætte den anvendte stil via en Type Selector alene og tilføje en Type Selector til en klasse eller ID i din CSS giver minimal ekstra specificitet.

Type Selectors rangerer også lavere på CSS-effektivitetsskalaen end klasser og ID'er. Derfor er det teknisk bedre præstationsvalg at bruge en klasse eller et ID i stedet for den mere generiske Type Selector (selvom den reelle hastighedsforskel typisk er ubetydelig).