1

Estoy aprendiendo layouts con flotantes en CSS y me ayuda mucho la declaración box-sizing: border-box; a la hora de visualizar y manejar bien mis elementos flotantes.

Pero me he encontrado con el problema de que cuando uso la declaración en body, no funciona para elementos hijos, pero cuando uso el asterisco sí funciona.

Mi hipótesis es que el selector "*" agarra todas la familia entera, padres e hijos.

2 respuestas 2

1

El * en CSS es un selector global, si lo usas solo colocando el * seleccionas todos los elementos a la vez, por lo que los estilos que agregues se aplicarían a todos los elementos. Puedes utilizarlo de otra manera para seleccionar elementos mas específicos, por ejemplo puedes utilizar el * y agregarle una clase, id o atributo para seleccionar todos los elementos que tengan esa clase, id o atributo, por ejemplo:

*[lang=en] {
    color: green;
}

*.text-red {
    color: red;
}

*#element {
    border: 1px solid blue;
}
2
  • gracias Bryant, como siempre ayudando! 👍
    – zaraterdz
    Commented el 27 dic. 2022 a las 2:24
  • De nada @zaraterdz siempre a la orden 👍 Commented el 27 dic. 2022 a las 19:35
0

En css se define a qué elementos se aplican ciertos estilos mediante un selector.

* es un selector especial. Es el selector universal. Con él seleccionas absolutamente todos los elementos.

Puedes interpretarlo como un comodín o un wildcard si conoces Regex, scripting en terminal o otros lugares donde tenga un uso similar.

Así mismo puedes ser más específico. Por ejemplo, seleccionar todos los elementos con la clase warning:

*.warning {
   ...
}

Probablemente te suene parecido a simplemente escribir:

.warning {
   ...
}

Es porque, efectivamente. La misma documentación indica que ambas expresiones son equivalentes.


Por otro lado, al usar el selector body se están definiendo los estilos para ese elemento (o elementos en el caso de que haya varios) en particular.

Seguramente te encuentres con un caso como el siguiente:

div {
   color: red;
}
<div>
   <h2> Texto </h2>
</div>

Acabo de decir que los estilos se aplican solo al elemento seleccionado. Naturalmente te preguntarás, entonces ¿Por qué el h2 tiene el mismo color que el div?

La respuesta es simple. Hay propiedades que son heredables. En pocas palabras, una propiedad es heredable recibe el mismo valor que su ancestro más cercano tenga.

Esto no es realmente así. A lo que se refiere es que el comportamiento por defecto de la propiedad es tomar el valor del padre.

Nota: Puedes heredar explícitamente el valor de una propiedad estableciéndola en inherit.

color es una propiedad heredable mientras que box-sizing no.

2
  • Excelente, entonces todo se reduce a que box-sizing no es una propiedad heredable, sólo aplicará para body y ya está, no aplicará para sus hijos. En cambio, con asterisco ya selecciono todos los padres, hijos y el árbol entero?
    – zaraterdz
    Commented el 27 dic. 2022 a las 2:26
  • @zaraterdz absolutamente todo. Cómo mencioné puedes ser más específico. Supon que solo quieres seleccionar a todos los hijos (y demás descendientes) del body, tendrías que usar body *.
    – Mateo
    Commented el 27 dic. 2022 a las 3:31

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.