2

No se muy bien cual es la diferencia entre estos selectores, creo que se usan para lo mismo.

1

2 respuestas 2

5

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!

3

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.