No se muy bien cual es la diferencia entre estos selectores, creo que se usan para lo mismo.
2 respuestas
Primero que todo cito la referencia de :root
en la documentación de Mozilla:
:root
de CSS selecciona el elemento raíz de un árbol que representa el documento.
En otras palabras, :root
selecciona todo el documento (HTML). Un ejemplo de :root
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
:root {
background-color: #10eb2e;
}
</style>
<input type="text">
<div>
Algo por acá
</div>
</body>
</html>
Ahora, cito de la el fragmento del apartado de selectores universales de la referencia de Mozilla
Selector universal: Selecciona todos los elementos.
*
se aplicará a todos los elementos del documento.
Lo que se aplique al selector *
afectará a todos los elementos de documento. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
* {
background-color: #10eb2e;
}
</style>
<input type="text">
<div>
Algo por acá
</div>
</body>
</html>
¿Que diferencias hay entre *
y :root
?
Si viste bien, en el primer ejemplo se usa :root
. Los estilos que se aplican en :root
solo afectan al documento raíz (HTML). Por otro lado, en el segundo ejemplo se usa *
y los estilos afectan a todos los elementos.
Conslusión:
En el ejemplo de :root
el input de texto no se ve afectado por el background-color
, en el segundo ejemplo si se ve afectado. Ahí esta la diferencia, :root
no afectó al input de texto, pero *
si lo hizo. De ahí mismo viene la diferencai entre selccionar el documento raíz y todos los elementos, :root
solo selecciona el documento y *
todos elementos dentro de este documento.
Es cierto que :root
es muy parecido al selector html
, pero :root
tiene más "prioridad" (por así decirlo). Ya hay una respuesta que responde a esto.
Espero que te haya servido de algo, saludos!
la diferencia es que el selector raiz(root) va hacer cambios en el elemento < html >, y de las propiedades que le agregues solo las que sean heredables afectaran los elementos hijos.
La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento y es idéntico al selector html, excepto que su especificidad es mayor.
y el selector '*' afectara todos los elementos lo que lo hace mucho mas pesado para el navegador. Es decir en términos prácticos con root solo algunas propiedades afectaran los elementos hijos
CSS tiene predefinido que propiedades se heredan, como el tamaño de la letra que se usa constantemente para para relacionar los tamaños en los elementos con em
:
El resumen de cada definición de propiedad CSS indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.