Den :rootvælgeren giver dig mulighed for at målrette det højeste niveau ”forælder” element i DOM, eller dokument træ. Det er defineret i CSS Selectors niveau 3-specifikation som en "strukturel pseudoklasse", hvilket betyder at den bruges til at style indhold baseret på dets forhold til overordnet og søskendeindhold.
I det overvældende flertal af tilfælde, du sandsynligvis vil støde på, :roothenviser til elementet på en webside. I et HTML-dokument vil htmlelementet altid være forælder på højeste niveau, så opførslen af :rooter forudsigelig. Da CSS imidlertid er et stylingsprog, der kan bruges med andre dokumentformater, såsom SVG og XML, kan :rootpseudoklassen henvise til forskellige elementer i disse tilfælde. Uanset markup-sprog :rootvælges altid dokumentets øverste element i dokumenttræet.
I eksemplet nedenfor bruges :rootpseudoklassevælgeren til at skabe en baggrundsfarve bag elementet. I dette tilfælde kunne den samme effekt opnås ved at bruge htmlelementvælgeren i vores CSS i stedet.
Interessepunkter
- Mens
:rootvælgeren oghtmlvælgeren begge er målrettet mod de samme HTML-elementer, kan det være nyttigt at vide, at det:rootfaktisk har en højere specificitet. Pseudoklassevælgere (men ikke pseudoelementer) har en specificitet, der er lig med en klasse, som er højere end en grundlæggende elementvælger.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| ja | ja | ja | 9.5+ | IE9 + | ja | ja |