Le :rootsélecteur vous permet de cibler l'élément «parent» de plus haut niveau dans le DOM, ou dans l'arborescence de documents. Elle est définie dans la spécification CSS Selectors Level 3 comme une «pseudo-classe structurelle», ce qui signifie qu'elle est utilisée pour styliser le contenu en fonction de sa relation avec le contenu parent et frère.
Dans la très grande majorité des cas que vous êtes susceptible de rencontrer, :rootfait référence à l' élément d'une page Web. Dans un document HTML, l' htmlélément sera toujours le parent de plus haut niveau, de sorte que le comportement de :rootest prévisible. Cependant, comme CSS est un langage de style qui peut être utilisé avec d'autres formats de document, tels que SVG et XML, la :rootpseudo-classe peut faire référence à différents éléments dans ces cas. Quel que soit le langage de balisage, :rootsélectionnera toujours l'élément le plus haut du document dans l'arborescence du document.
Dans l'exemple ci-dessous, le :rootsélecteur de pseudo-classe est utilisé pour créer une couleur d'arrière-plan derrière l' élément. Dans ce cas, le même effet pourrait être obtenu en utilisant le htmlsélecteur d'élément dans notre CSS à la place.
Points d'interêts
- Alors que le
:rootsélecteur et lehtmlsélecteur ciblent tous les deux les mêmes éléments HTML, il peut être utile de savoir qui a:rooten fait une spécificité plus élevée. Les sélecteurs de pseudo-classes (mais pas les pseudo-éléments) ont une spécificité égale à celle d'une classe, qui est supérieure à un sélecteur d'élément de base.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Ouais | Ouais | Ouais | 9.5+ | IE9 + | Ouais | Ouais |