nth - ¿Cuál es la diferencia entre CSS3''s: root pseudo class y html?
pseudo elements css (3)
Parece que no puede encontrar mucha información sobre esto.
Smashing Magazine parece decir esencialmente que html y :root son lo mismo, pero seguramente debe haber una diferencia.
La pseudoclase de
:rootrepresenta un elemento que es la raíz del documento. En HTML, este es siempre el elemento HTML.
CSS es un lenguaje de estilo de uso general que se puede usar con otros tipos de documentos, no solo con HTML, como SVG.
De la specification (énfasis mío):
Esta especificación define hojas de estilo en cascada, revisión 2 de nivel 2 (CSS 2.1). CSS 2.1 es un lenguaje de hojas de estilo que permite a los autores y usuarios adjuntar estilo (por ejemplo, fuentes y espaciado) a documentos estructurados (por ejemplo, documentos HTML y aplicaciones XML) .
Para un documento html , su elemento raíz es, por supuesto, la etiqueta <html> . Sin embargo, puede aplicar un estilo a un documento svg con css y ahora su :root pseudo class se refiere al elemento svg .
Puede usar CSS no solo con HTML, sino con todos los documentos de tipo XML, y es por eso que :root generalmente se aplica al elemento raíz independientemente del tipo de documento (que, sin embargo, en el 99% de los casos será html).
Una diferencia técnica entre ellos es que :root : ser una pseudo clase tiene una mayor especificidad que html (un selector de tipo)
:root {
color: red
}
html {
color: green;
}
<div>hello world</div>
Entonces, en el ejemplo anterior, el selector de :root anula el selector html y el texto aparece en rojo.