El :rootselector le permite apuntar al elemento "padre" de nivel más alto en el DOM, o árbol de documentos. Se define en la especificación CSS Selectors Level 3 como una "pseudoclase estructural", lo que significa que se utiliza para diseñar contenido en función de su relación con el contenido principal y hermano.
En la inmensa mayoría de los casos que es probable que encuentre, se :rootrefiere al elemento de una página web. En un documento HTML, el htmlelemento siempre será el padre de más alto nivel, por lo que el comportamiento de :rootes predecible. Sin embargo, dado que CSS es un lenguaje de estilo que se puede usar con otros formatos de documentos, como SVG y XML, la :rootpseudoclase puede referirse a diferentes elementos en esos casos. Independientemente del lenguaje de marcado, :rootsiempre seleccionará el elemento superior del documento en el árbol del documento.
En el siguiente ejemplo, el :rootselector de pseudoclase se usa para crear un color de fondo detrás del elemento. En este caso, se podría lograr el mismo efecto utilizando el htmlselector de elementos en nuestro CSS.
Puntos de interés
- Si bien el
:rootselector y elhtmlselector apuntan a los mismos elementos HTML, puede ser útil saber que en:rootrealidad tiene una mayor especificidad. Los selectores de pseudo-clases (pero no los pseudo-elementos) tienen una especificidad igual a la de una clase, que es más alta que un selector de elementos básicos.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | sí | sí | 9.5+ | IE9 + | sí | sí |