Herencia CSS
Comprende cómo funciona la herencia en CSS. Aprende qué propiedades se heredan, cómo forzar la herencia con inherit, y cómo interactúa la herencia con la especificidad.
La herencia es uno de los conceptos más importantes para entender cómo funcionan los estilos en CSS. Permite que ciertos valores de las propiedades de un elemento se transmitan a sus elementos hijos, lo que facilita mantener un código limpio y reducir la repetición.
¿Qué es la herencia en CSS?
La herencia es el mecanismo por el cual un elemento hijo "hereda" los valores de ciertas propiedades de su elemento padre.
Por ejemplo, si defines un color de texto en un elemento <body>, todos sus elementos hijos (como párrafos <p> o encabezados <h1>) lo heredan automáticamente, a menos que se especifique lo contrario.
Ejemplo básico
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
color: blue; /* Parent element */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Resultado:
- El texto del
<h1>y<p>será azul, porque heredan el color del elemento<body>.
Propiedades que se heredan y no se heredan
Propiedades que se heredan automáticamente
Por defecto, las propiedades relacionadas con texto se heredan. Ejemplos:
-
color -
font-family -
font-size -
visibility -
letter-spacing -
line-height
Ejemplo:
body {
color: red; /* Text color */
font-family: Arial, sans-serif;
}
Los hijos heredarán tanto el color como la font-family.
Propiedades que NO se heredan automáticamente
Las propiedades relacionadas con el layout, caja y espaciado no se heredan. Ejemplos:
-
margin -
padding -
border -
background -
widthyheight -
position
Ejemplo:
body {
margin: 20px;
background-color: lightgrey;
}
Los elementos hijos no heredarán el margin ni el background-color de <body>.
Forzar la herencia con inherit
CSS te permite forzar la herencia en cualquier propiedad, incluso en aquellas que no se heredan por defecto, utilizando la palabra clave inherit.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: sans-serif;
}
.container {
text-align: center;
border: 5px solid red;
}
.button {
padding: 10px 20px;
border: 1px solid #333;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="button">Click me</div>
</div>
</body>
</html>
Resultado:
El bordee de .button será red porque hemos forzado la herencia de la propiedad border.
Enlace de referencia: MDN: inherit
Valores initial y unset
initial
La palabra clave initial restablece una propiedad a su valor predeterminado definido por CSS.
Ejemplo:
p {
color: red;
}
span {
color: initial; /* Resets to default value: black */
}
unset
La palabra clave unset restablece una propiedad a su valor heredado, si es heredable, o a su valor predeterminado si no lo es.
Ejemplo:
body {
color: blue;
}
p {
color: unset; /* Acts like 'inherit' for color */
}
Ejemplo práctico combinado
Vamos a ver un ejemplo más completo donde combinamos herencia y uso de inherit, initial y unset:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
color: purple; /* Parent text color */
}
p {
color: inherit; /* Forces inheritance */
}
h1 {
color: initial; /* Resets to default black */
}
span {
color: unset; /* Acts like 'inherit' for text color */
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph. <span>This is a span inside a paragraph.</span></p>
</body>
</html>
Resultado:
- El
<h1>tendrá un colorblack(valor predeterminado decolor). - El
<p>heredará el colorpurpledel<body>. - El
<span>dentro del<p>también heredará el colornavy.
VS especificidad
-
La herencia ocurre de forma pasiva
- Es decir, si un elemento no tiene una regla CSS directa que le afecte en cierta propiedad, y esa propiedad es heredable (como color o font-family), tomará el valor del elemento padre más cercano que sí la tenga.
-
La especificidad es activa y gana
-
Si un selector tiene una regla explícita, aunque sea con poca especificidad, esa regla tiene prioridad sobre la herencia.
body { color: blue; } p { color: red; } -
Aquí el
<p>será rojo, aunque herede blue del<body>, porque hay una regla más específica directamente sobre p.
-
-
Herencia vs especificidad: gana la que está definida
- Si tienes una propiedad heredada y luego aplicas esa misma propiedad en una regla con baja especificidad, esa regla reemplaza el valor heredado.
- La herencia solo entra en acción cuando no hay reglas más específicas.
<style> body { color: green; /* Inhertisd */ } .highlight { color: red; /* Explicit rule (lower specificity) */ } </style> <body> <p class="highlight">This text is red, not green.</p> </body>
Resumen de herencia CSS
- La herencia permite que ciertos estilos (texto y fuente) se transmitan de un elemento padre a sus hijos.
-
Propiedades heredadas:
color,font-family, etc. -
Propiedades no heredadas:
margin,background, etc. - Puedes forzar la herencia con
inherit. - Usa
initialpara restablecer un valor al predeterminado yunsetpara elegir entre herencia y predeterminado. - Si un elemento tiene una regla CSS directa para una propiedad, esa regla se aplicará aunque la herencia diga otra cosa. La especificidad siempre tiene prioridad.
