Den :rootVelgeren tillater deg å målrette høyeste nivå “foreldre” element i DOM, eller dokument treet. Det er definert i CSS Selectors Level 3-spesifikasjonen som en "strukturell pseudoklasse", noe som betyr at den brukes til å style innhold basert på forholdet til foreldre- og søskeninnhold.
I det overveldende flertallet av tilfellene du sannsynligvis vil møte, :rootrefererer til elementet på en webside. I et HTML-dokument vil htmlelementet alltid være det overordnede nivået, slik at oppførselen til :rooter forutsigbar. Men siden CSS er et stylingspråk som kan brukes med andre dokumentformater, for eksempel SVG og XML, kan :rootpseudoklassen referere til forskjellige elementer i disse tilfellene. Uavhengig av merkespråk, :rootvil alltid velge dokumentets øverste element i dokumenttreet.
I eksemplet nedenfor :rootbrukes pseudoklasservelgeren til å lage en bakgrunnsfarge bak elementet. I dette tilfellet kan den samme effekten oppnås ved å bruke htmlelementvelgeren i CSS i stedet.
Interessepunkt
- Mens
:rootvelgeren oghtmlvelgeren begge retter seg mot de samme HTML-elementene, kan det være nyttig å vite at det:rootfaktisk har høyere spesifisitet. Pseudoklassevalgere (men ikke pseudoelementer) har en spesifisitet som er lik en klasse, som er høyere enn en grunnleggende elementvelger.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| yep | yep | yep | 9.5+ | IE9 + | yep | yep |