Ahora que ya conocemos la herencia en CSS y sabemos de que se trata, vamos a ver una serie de recursos para forzar y modificar su comportamiento al que más nos interese.
¿Cómo forzar herencia en CSS?
En el capítulo anterior vimos que ciertas propiedades como color o font-size heredan de forma automática los valores de sus elementos padres, mientras que otras propiedades como border no lo hacen.
Este comportamiento se puede forzar de forma manual, utilizando ciertos valores especiales, disponibles en todas las propiedades CSS existentes. Esos valores son los siguientes:
| Valor | Significado |
|---|---|
inherit | La propiedad hereda el valor que tiene la misma propiedad CSS en su elemento padre. |
initial | Establece al valor valor predeterminado definido por la especificación CSS, ignorando la herencia. |
unset | Resetea el valor. En propiedades heredables: inherit, en propiedades no heredables: initial. |
revert | Vuelve al estilo inmediatamente anterior aplicado en la cascada. |
Veamos un ejemplo de cada una de ellas por separado.
El valor inherit
El valor inherit es el más sencillo de todos, ya que simplemente hereda el valor de la misma propiedad en su elemento padre. Por ejemplo, la propiedad border es una propiedad no heredable, vamos a convertirla en heredable con inherit:
.parent {
color: green;
border: 3px solid red;
}
.child {
border: inherit;
}
<div class="parent">
<p>Hello from parent!</p>
<div class="child">
<p>Hello from child!</p>
</div>
</div>
Al utilizar el valor inherit, la propiedad border del elemento hijo hereda el valor de la propiedad border de su elemento padre, pasando a tener un borde propio, al igual que su elemento padre. Por su parte, la propiedad color ya era heredable, por lo tanto, cambia el color a su elemento hijo a verde porque lo hereda.
El valor initial
Veamos ahora el mismo ejemplo anterior, centrándonos en el color de texto. Antes, colocamos color: green en el padre. Como color es una propiedad heredable , el hijo tomaba el color del padre. Ahora, vamos a añadir un color: initial en el hijo:
.parent {
color: green;
border: 3px solid red;
}
.child {
border: inherit;
color: initial;
}
<div class="parent">
<p>Hello from parent!</p>
<div class="child">
<p>Hello from child!</p>
</div>
</div>
Con ese valor initial en la propiedad color del hijo, se pasa a utilizar un color negro para el texto, ya que es el valor inicial (predeterminado) de esta propiedad.
El valor unset
El valor unset es sencillo de entender. En propiedades heredables, es como utilizar el valor inherit, en propiedades no heredables, es como utilizar el valor initial. Veamos con el ejemplo anterior:
.parent {
color: green;
border: 3px solid red;
}
.child {
border: unset; /* Propiedad no heredable (initial): Valor predeterminado */
color: unset; /* Propiedad heredable (inherit): Hereda el verde */
}
<div class="parent">
<p>Hello from parent!</p>
<div class="child">
<p>Hello from child!</p>
</div>
</div>
En el caso de color actúa como inherit, por lo que hereda el verde de su elemento padre. En el caso de border, actúa como initial, y toma el valor predeterminado del border, que contiene el border-style en none, y por lo tanto no tiene borde.
El valor revert
En el siguiente ejemplo vamos a ver como funciona revert, y para ello tenemos que observar como funciona la cascada.
- 1️⃣ El navegador le da estilo al elemento
<body>, por lo que pinta el texto verde. - 2️⃣ El navegador le da estilo al elemento
.parent, por lo que sobreescribe con color de texto azul. - 3️⃣ El navegador le da estilo al elemento
.child, y revertimos al valor anterior: azul.
body {
color: green;
}
.parent {
color: blue;
}
.child {
color: revert;
}
<div class="parent">
<p>Hello from parent!</p>
<div class="child">
<p>Hello from child!</p>
</div>
</div>
En casos más complejos donde interviene la especificidad (la veremos más adelante) este valor podría ser más útil, ya que el cambio de valor no es tan directo.
La propiedad all
Existe una propiedad CSS denominada all que sirve para resetear todas las propiedades establecidas del selector definido en CSS. Por ejemplo, imaginemos un <div class="element">. Este elemento, por defecto, es «invisible»: no tiene tamaño de alto, no tiene color de fondo y no tiene borde.
Le establecemos unas dimensiones, un color de fondo y un borde:
.element {
width: 200px;
height: 200px;
font-size: 42px;
color: red;
background: indigo;
border: 3px solid black;
}
.element {
all: initial;
}
<div class="element">Esto es un texto de ejemplo.</div>
Observa que a pesar de usar todas esas propiedades, mediante la propiedad all hemos reseteado todos los estilos que afectan a ese elemento a sus valores por defecto.
Recuerda que la propiedad
allno reseteará las propiedades CSSdirection,unicode-bidini las variables CSS establecidas.
