Hay ciertos detalles que hay que tener claros antes de empezar a profundizar en CSS. El concepto de herencia y el de cascada (que veremos más adelante) son dos de las características CSS más infravaloradas y que más problemas suelen producir, ya que sin lugar a dudas son los que menos se conocen y los que mayor frustración acarrean porque se utilizan indebidamente.
Antes de empezar, debemos saber que algunas propiedades CSS, como color
o font-family
, se heredan desde los elementos HTML padres a los elementos HTML hijos, modificando el valor que tienen por defecto. Observa en el siguiente ejemplo, donde aplicamos un color verde al texto de la clase .container
(padre):
<div class="container">
<p>Texto del padre</p>
<div class="child">
<p>Texto del hijo</p>
</div>
</div>
<style>
.container {
color: green; /* Propiedad heredable */
border: 1px solid red; /* Propiedad no heredable */
}
</style>
Si observas el resultado, verás que tanto el texto de .container
(padre) como el texto de .child
(hijo) aparecerán de color verde. Esto en cierta forma debería resultarnos lógico, ya que el elemento .child
se encuentra en el interior de .container
, y no hay ninguna otra regla más especifica que le dé otro color de texto a ese elemento interior.
Sin embargo, con el borde rojo sólo se aplica borde al .container
. El elemento .child
no se ve afectado. Esto ocurre porque algunas propiedades como color
o font-family
se heredan en los hijos, mientras que otras propiedades como border
, no.
Si esta propiedad aplicara herencia a sus hijos, todos los elementos HTML situados en el interior de
.container
tendrían su propio borde rojo, comportamiento que no suele ser el deseado. Por esa razón, la herencia no ocurre con todas las propiedades CSS, sino sólo con algunas propiedades donde si suele ser deseable.
Además de los valores habituales de cada propiedad CSS que iremos viendo a lo largo de nuestros artículos, también podemos aplicar ciertos valores especiales que son comunes a todas las propiedades CSS existentes. Con estos valores modificamos el comportamiento de la herencia en dicha propiedad:
Valor | Significado |
---|---|
inherit |
La propiedad hereda el valor que tiene la misma propiedad CSS en su elemento padre. |
initial |
Establece el valor al valor inicial definido por la especificación CSS. |
unset |
Resetea el valor. En propiedades heredables, actua como inherit , en otro caso, como initial . |
revert |
Similar a unset , salvo que haya definido un origen de agente o de usuario (ver más adelante). |
Siguiendo el mismo ejemplo anterior, nuestros estilos podrían ser los siguientes:
.container {
color: green;
border: 1px solid red;
}
.child {
border: inherit;
}
En el caso de que .child
no tuviera la propiedad border
establecida (o la tuviera a initial
o unset
), dicho .child
no tendría borde ya que se trata de una propiedad no heredable. Sin embargo, si utilizamos el valor inherit
, la propiedad hereda el valor de la propiedad border
de su padre, y pasará a tener un borde propio, al igual que su elemento padre.
Veamos ahora el mismo caso, pero con la propiedad color
, que es una propiedad heredable:
.container {
color: green;
border: 1px solid red;
}
.child {
color: inherit;
}
Por defecto, .child
muestra el mismo color de texto que el elemento padre, ya que hereda su valor de color
. Ocurre lo mismo si utilizamos el valor inherit
o el valor unset
. Sin embargo, si utilizamos el valor initial
, pasa a utilizar un color negro para el texto, ya que es su valor inicial por defecto.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev