1

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

1

2 respuestas 2

4

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!

2

la diferencia es que el sector raiz(root) va hacer cambios en el elemento < html >, de las propiedades que le agregues, las que sean heradables 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 terminos practicos 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 costantemente 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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