Antes de empezar a profundizar en CSS, hay ciertos detalles que convendría conocer bien. El concepto de herencia es uno de ellos. Se trata de una característica básica de CSS, que mucha gente desconoce y que puede provocar problemas si no se utiliza adecuadamente.
¿Qué es la herencia en CSS?
A la hora de escribir código CSS, comenzamos escribiéndolo desde arriba hacia abajo. Esto puede parecer simple (y lo es), pero a medida que escribimos, nuestro código CSS se hace más y más extenso y ya no es tan sencillo añadir líneas de código, porque tenemos que volver hacia atrás, revisar si la clase que vamos a escribir ya existe, modificar código ya existente, ser organizado, etc...
Observa el siguiente fragmento de código:
.parent {
background: black;
color: white;
}
.child {
color: gold;
}
<div class="parent">
<p class="child">Hello from child!</p>
</div>
Observa que en este caso, el texto .child aparece de color dorado porque tenemos un color: gold dentro del .child. Si no lo tuvieramos, el .child se mostraría de color blanco porque hereda el color de su elemento padre .parent, donde tiene establecido un color: white.
Ten en cuenta la estructura del DOM (HTML) de la página. En CSS, si nosotros damos estilo a un elemento HTML, su hijo directo hereda el estilo del padre, salvo que le hayas indicado explícitamente otro estilo diferente. A continuación, ocurre lo mismo con el hijo del hijo, que hereda los estilos de su padre directo. Y así sucesivamente.
html
|
+--- body
|
+--- .parent
|
+--- .child
Si colocamos un color de texto en el <body>, el elemento .parent y el elemento <h1> heredarán el mismo color de texto (salvo que en alguno de los padres se cambie el estilo). Esto es la herencia de CSS, en principio algo sencillo, pero que se va complicando poco a poco.
Recuerda que una forma de organizar tu código CSS es aplicar Nesting CSS, un mecanismo para organizar mejor tus estilos, más legible y de forma nativa, sin herramientas de terceros.
Propiedades heredables
Debemos saber que no todas las propiedades CSS son heredables. Las propiedades color o font-family son heredables y su valor se hereda desde los elementos HTML padres hacia los elementos HTML hijos, sobreescribiendo el valor que tienen por defecto.
Esto ocurre con prácticamente todas las propiedades de texto o tipografías, como font-* o text-*, además de algunas propiedades muy concretas:
| Propiedad heredable | Descripción |
|---|---|
color | Establece el color de texto. |
font-family, font-size, font-style, font-variant, font-weight | Propiedades relacionadas con la tipografía. |
text-align, text-shadow, text-overflow, text-indent, text-transform | Propiedades relacionadas con el texto. |
word-spacing, letter-spacing, direction, line-height, white-space | Propiedades especiales de texto. |
visibility | Propiedad de visibilidad de un elemento. |
list-style-type | Propiedad para viñetas de una lista. |
Observa ahora el siguiente ejemplo, donde tenemos tres elementos: .grandparent, .parent y .child. Vamos a aplicarle estilo a .grandparent, que es el padre de .parent:
.grandparent {
color: green; /* Propiedad heredable */
font-size: 28px; /* Propiedad heredable */
border: 3px solid red; /* Propiedad no heredable */
}
<div class="grandparent">
Hello from grandparent!
<div class="parent">
Hello from parent!
<div class="child">
Hello from child!
</div>
</div>
</div>
Si observas el resultado y el código HTML, verás que tanto el texto de .grandparent (abuelo), como el de .parent (padre), como el de .child (hijo) aparecerán de color verde y con el mismo tamaño. Esto ocurre porque las propiedades color y font-size son heredables y se van heredando de sus padres directos.
Sin embargo, con el borde rojo sólo se aplica borde al .grandparent (abuelo). La propiedad border no es heredable.
Si la propiedad
borderaplicara herencia a sus hijos, todos los elementos HTML situados en el interior de.parenttendrían su propio borde rojo, comportamiento que no suele ser el deseado. La herencia sólo ocurre con algunas propiedades donde suele ser deseable.
