Saltar al contenido

¿Cuál es la diferencia entre la pseudoclase :root de CSS3 y html?

Nuestro grupo de trabajo ha pasado mucho tiempo buscando respuestas a tu búsqueda, te ofrecemos la soluciones por esto esperamos que te resulte de mucha ayuda.

Solución:

De la wiki del W3C:

los :root pseudo-clase representa un elemento que es la raíz del documento. En HTML, este es siempre el elemento HTML.

CSS es un lenguaje de estilo de propósito general. Se puede usar con otros tipos de documentos, no solo con HTML, se puede usar con SVG, por ejemplo.

De la especificación (énfasis mío):

Esta especificación define las hojas de estilo en cascada, nivel 2, revisión 1 (CSS 2.1). CSS 2.1 es un lenguaje de hojas de estilo que permite a los autores y usuarios adjuntar estilos (por ejemplo, fuentes y espacios) a documentos estructurados (por ejemplo, documentos HTML y aplicaciones XML).

Una diferencia técnica entre ellos es que :root – ser una pseudoclase tiene una mayor especificidad que html (un selector de tipo)

:root 
  color: red

html 
  color: green;
hello world

Entonces, en el ejemplo anterior, el :root selector anula el html selector y el texto aparece en rojo.

Para documentos HTML, no hay diferencia – su elemento raíz es el etiqueta, entonces html y :root son (además de una diferencia en la especificidad) semánticamente equivalentes.

Sin embargo, puede aplicar CSS no solo a HTML, sino a todos los documentos similares a XML. Es por eso :root está ahí: para apuntar al elemento raíz del documento, independientemente del tipo de documento. La mayoría de las personas están confundidas por la diferencia porque el caso de uso abrumadoramente predominante para CSS es diseñar documentos HTML.

Ejemplo: puede diseñar documentos SVG con CSS. Al diseñarlo, su elemento raíz (obviamente;-)) no será html pero svg. Consulte la siguiente lista de etiquetas SVG.

Si te gusta el tema, tienes el poder dejar un enunciado acerca de qué te ha parecido esta noticia.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *