Med :rootväljaren kan du rikta in dig på det överordnade "överordnade" elementet i DOM eller dokumentträdet. Det definieras i CSS Selectors nivå 3-specifikationen som en "strukturell pseudoklass", vilket betyder att den används för att utforma innehåll baserat på dess förhållande till föräldra- och syskoninnehåll.
I den överväldigande majoriteten av fallen som du sannolikt kommer att stöta på, :roothänvisar till elementet på en webbsida. I ett HTML-dokument htmlkommer elementet alltid att vara överordnad på högsta nivå, så beteendet :rootär förutsägbart. Eftersom CSS är ett stylingspråk som kan användas med andra dokumentformat, till exempel SVG och XML, kan :rootpseudoklassen dock hänvisa till olika element i dessa fall. Oavsett markeringsspråk, :rootkommer du alltid att välja dokumentets högsta element i dokumentträdet.
I exemplet nedan används :rootpseudoklassväljaren för att skapa en bakgrundsfärg bakom elementet. I det här fallet kan samma effekt uppnås genom att använda htmlelementväljaren i vår CSS istället.
Intressanta platser
- Medan
:rootväljaren ochhtmlväljaren båda är inriktade på samma HTML-element, kan det vara användbart att veta att det:rootfaktiskt har en högre specificitet. Pseudoklassväljare (men inte pseudoelement) har en specificitet som är lika med en klass, vilket är högre än en grundläggande elementväljare.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Japp | Japp | Japp | 9,5+ | IE9 + | Japp | Japp |