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.