Herencia CSS

Que es la herencia CSS, que propiedades se heredan del elemento padre y cuales no, control de herencia con las propiedades universales inherit, initial y unset y restablecer todos los valores con la propiedad all

El objetivo de este articulo es ayudar a la comprensión del comportamiento de la herencia CSS y poder identificar conflictos básicos de ambigüedad a la hora de establecer las reglas CSS.

La herencia CSS trabaja junto a la cascada CSS y a su vez con la especificidad CSS para resolver los conflictos de ambigüedad. Esto puede parecer confuso al principio, así que recomendamos haber entendido previamente el comportamiento de la cascada CSS antes de continuar con este tema.

El concepto de herencia CSS significa que algunas propiedades CSS heredan los valores establecidos de su elemento padre por defecto, pero otras no:

Por ejemplo, si para un elemento se establece el color color y el tipo de letra font-family, cada elemento que se encuentre anidado dentro de este, también se visualizara en ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

Pero algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho width del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!

La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Pero por ejemplo, si en una lista ordenada <ol> o no ordenada <ul> sus elementos hijo de lista <li> heredaran sus bordes, todas estos elementos de lista ganarían un borde cada vez amplio ¡y no es probable que quieras un efecto así!

Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.

Ejemplos:

En el entendido de que algunos valores de propiedades CSS se heredan y otras no, veamos un ejemplo en donde se establece a un elemento el color y el tipo de letra (las propiedades color y font-family respectivamente), cada elemento que se encuentre andado en este elemento, se visualizarán de ese color y de ese tipo de letra (como a su elemento padre),  a menos que se haya establecido un color o tipo de letra específicamente al elemento hijo.

Ejemplo 1:

En el siguiente ejemplo se establece el color azul al elemento <p> con clase "azul", y se establece el color rojo al elemento <strong>; así el texto incluido en los párrafos será visualizado en color azul a excepción del texto incluido en el elemento <strong>:

CSS:

p.azul {
  color: blue;
}
p.azul strong {
  color: red;
}

HTML:

<body>
  <p>Texto dentro un párrafo normal</p>
  <p class="azul">Texto dentro un párrafo con la clase azul</p>
  <p class="azul">Texto dentro de otro párrafo azul pero: <strong>Este texto esta dentro de un span</strong>.</p>
</body>

Muestra:

Texto dentro un párrafo normal

Texto dentro un párrafo con la clase azul

Texto dentro de otro párrafo azul pero: Este texto esta dentro de un strong.

Ejemplo 2:

El ejemplo siguiente, tenemos un elemento <ul> con dos niveles de listas no ordenadas anidadas en él. Se establece para el elemento <ul> exterior un borde, un relleno y un color de letra.

El color se aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <li> inmediatos y los que están dentro de la primera lista.

A la segunda lista anidada se establece la clase especial y un color de letra diferente, que los elementos hijos de este los heredarán.

CSS:

.principal {
    color: rebeccapurple;
    border: 2px solid #ccc;
    padding: 1em;
}
.especial {
    color: black;
    font-weight: bold;
} 

HTML:

<ul class="principal">
    <li>Primer Elemento</li>
    <li>Segundo Elemento
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>Tercer Elemento
        <ul class="especial">
            <li>3.1
                <ul>
                    <li>3.1.1</li>
                    <li>3.1.2</li>
                </ul>
            </li>
            <li>3.2</li>
        </ul>
    </li>
</ul>

Muestra:

  • Primer Elemento
  • Segundo Elemento
    • 2.1
    • 2.2
  • Tercer Elemento
    • 3.1
      • 3.1.1
      • 3.1.2
    • 3.2

Como se mencionó anteriormente, la anchura, los márgenes, el relleno y los bordes no se heredan.

Control de la herencia

CSS proporciona tres valores de propiedades universales, esenciales para el control de herencia. Todas las propiedades aceptan estos valores, aunque su comportamiento varia si la propiedad heredadas a los no heredadas. 

inherit
Al establecer este valor a un elemento hace que tome exactamente el valor del elemento padre. En la práctica, esto "activa la herencia" pero tiene poco sentido para las propiedades que no se heredan al no aplicar ningún valor.
initial
Al establecer este valor a una propiedad hace que tome el valor establecido para esta propiedad definido en la hoja de estilo por defecto del navegador. Es decir, lo fuerza a tomar su valor inicial.
unset
Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como inherit, y en caso contrario como initial.

Nota: También hay un valor más reciente, revert, que todavía no lo admiten todos navegadores.

Restablecer todos los valores de propiedad

La propiedad CSS abreviada all se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (inherit, initial, unset, o revert). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.

En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor all en unset.

CSS:

blockquote {
    background-color: pink;
    border: 2px solid green;
}
        
.restablecer {
    all: unset;
}

HTML

<blockquote>
  Este bloque de cita tiene estilos.
</blockquote>
<blockquote class="restablecer">
  Este bloque de cita se restablece.
</blockquote>

Muestra:

Este bloque de cita tiene estilos.
Este bloque de cita se restablece.

Prueba a establecer el valor de all al resto de valores disponibles y observa la diferencia.