Typ - CSS-tricks | CSS Almanack 2025

En typväljare (ibland kallad elementtypväljare) matchar element med motsvarande elementnodnamn, t.ex.

, och taggar. Typväljare används vanligtvis för att göra "breda" ändringar i stilen på en webbplats.

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

Vanlig användning

Ofta ställs typväljare in som standard, till exempel i en CSS-återställning där avsikten är att åsidosätta webbläsarens standardvärden. Ett exempel från den första raden av normalize.css, en populär CSS-återställning:

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

Typväljarna ovan ställer in visningsegenskapen för dessa taggar så att de blockeras så att någon av dessa taggar används överallt på webbplatsen så att de visas som block om de inte skrivs över av en mer specifik stil.

Bästa praxis

Det anses allmänt som dålig praxis att tillämpa små detaljändringar med enbart en typväljare. Att till exempel använda en "färg: vit" -egenskap helt och hållet på alla taggar skulle sällan vara till nytta på någon webbplats. Detta beror på att taggar är generiska och används på webbplatser för olika ändamål.

Men med en typväljare som att body ( )ställa in en standard font-size och line-heightär vanligt. Detta beror delvis på att det bara kan finnas en tagg på en viss sida, så det finns färre möjligheter för konflikter.

Typväljare Specificitet och prestanda

Typväljare är på den lägsta nivån i kaskadens specificitet (skrivs vanligtvis som 0, 0, 0, 1), vilket innebär att nästan vad som helst kommer att åsidosätta den stil som tillämpas via en typväljare ensam och lägga till en typväljare i en klass eller ID i din CSS ger minimal extra specificitet.

Typväljare rankas också lägre på CSS-effektivitetsskalan än klasser och ID: n. Därför är det tekniskt bättre prestandaval att använda en klass eller ett ID snarare än den mer generiska typväljaren (även om den verkliga hastighetsskillnaden vanligtvis är försumbar).