Met de :rootselector kunt u zich richten op het "bovenliggende" element op het hoogste niveau in de DOM of documentboom. Het wordt in de CSS Selectors Level 3-specificatie gedefinieerd als een "structurele pseudo-klasse", wat betekent dat het wordt gebruikt om inhoud op te maken op basis van de relatie met inhoud van ouders en broers en zussen.
In de overgrote meerderheid van de gevallen die u waarschijnlijk zult tegenkomen, :rootverwijst dit naar het element in een webpagina. In een HTML-document is het htmlelement altijd het bovenliggende niveau van het hoogste niveau, dus het gedrag van :rootis voorspelbaar. Omdat CSS echter een stijltaal is die kan worden gebruikt met andere documentindelingen, zoals SVG en XML, kan de :rootpseudo-klasse in die gevallen naar verschillende elementen verwijzen. Ongeacht de opmaaktaal, :rootwordt altijd het bovenste element van het document in de documentboom geselecteerd.
In het onderstaande voorbeeld wordt de :rootpseudo-class selector gebruikt om een achtergrondkleur achter het element te creëren . In dit geval zou hetzelfde effect kunnen worden bereikt door htmlin plaats daarvan de elementenselector in onze CSS te gebruiken.
Nuttige Plaatsen
- Hoewel de
:rootselector enhtmlselector beide op dezelfde HTML-elementen zijn gericht, kan het handig zijn om te weten dat deze in:rootfeite een hogere specificiteit hebben. Pseudo-class selectors (maar niet pseudo-elementen) hebben een specificiteit die gelijk is aan die van een klasse, die hoger is dan een basis element selector.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| ja | ja | ja | 9.5+ | IE9 + | ja | ja |