Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Existen relaciones en HTML, y estas relaciones nos permiten seleccionar y aplicar estilo a los elementos de una página web. Cuando un elemento HTML se encuentra anidado dentro de otro, el elemento exterior se conoce como padre, mientras que el elemento interior es el hijo.
1 |
<div>
|
2 |
<h>Heading</h> |
3 |
<span>I am a span</span> |
4 |
<p>This is a paragraph</p> |
5 |
</div>
|
Un elemento hijo puede convertirse en padre de otro elemento.
¿Para qué tener todo este preámbulo y trasfondo? ¡porque es importante!
Cuando aplicas un estilo a un elemento padre, en algunos casos el estilo será heredado por sus elementos hijos. Digo que en algunos casos porque este tipo de herencia no siempre ocurre.
La importancia de la herencia en CSS
Si alguna vez has aplicado estilos al contenido de una página web, es muy posible que no hayas escrito un estilo de fuente para cada elemento que tenga que mostrar texto. Es posible que solamente hayas agregado tus estilos de fuente al elemento body, por ejemplo:
1 |
<body>
|
2 |
<div>
|
3 |
<h2>A h2 element</h2> |
4 |
<p>A paragraph</p> |
5 |
<div>
|
6 |
<p>Another paragraph</p> |
7 |
</div>
|
8 |
</div>
|
9 |
<div>
|
10 |
<h3>A h3 element</h3> |
11 |
</div>
|
12 |
</body>
|
Si quieres tener un estilo de fuente uniforme para todo este contenido, solamente tienes que aplicar estilo al elemento body:
1 |
body { |
2 |
font-family: Arial, Helvetica, sans-serif; |
3 |
}
|
Esto es posible debido a la herencia entre los elementos HTML. Y es útil, ya que no tenemos que repetir el mismo estilo font para los divs y los encabezados. Lo mismo ocurre con los estilos color, que cuando se aplican a un elemento padre serán aplicados a los hijos de ese padre, a menos que se aplique un estilo color diferente sobre los elementos hijos.
Si bien la herencia nos facilita las cosas, la situación no sería tan sencilla si todas las propiedades CSS se comportaran de esta manera.
Aquí tenemos otro ejemplo:
1 |
<ul class="main-list"> |
2 |
<li>Dairy</li> |
3 |
<li>Vegetable</li> |
4 |
<li class="sub-list"> |
5 |
Fruit |
6 |
<ul>
|
7 |
<li>
|
8 |
Drupe |
9 |
<ul>
|
10 |
<li>Peach</li> |
11 |
<li>Coconut</li> |
12 |
<li>Olive
|
13 |
</ul>
|
14 |
</li>
|
15 |
<li>
|
16 |
Berry |
17 |
<ul>
|
18 |
<li>Tomato</li> |
19 |
<li>Cucumber</li> |
20 |
</ul>
|
21 |
</li>
|
22 |
</ul>
|
23 |
</li>
|
24 |
</ul>
|
¡¿Quién se imaginaría que los pepinos son bayas?! vamos a implementar algunos estilos en la lista padre y veremos qué se hereda a lo largo del linaje:
Los estilos font y color que fueron aplicados a la lista no ordenada son heredados por sus elementos hijos e incluso por sus elementos nietos. Sin embargo, no ocurre lo mismo en el caso de los estilos border.
Entonces, ¿qué otras propiedades se heredan?
Una lista completa de propiedades heredadas
De acuerdo al W3C, estas son las propiedades que pueden ser heredadas.
azimuthborder-collapseborder-spacingcaption-sidecolorcursordirectionelevationempty-cellsfont-familyfont-sizefont-stylefont-variantfont-weightfontletter-spacingline-heightlist-style-imagelist-style-positionlist-style-typelist-styleorphanspitch-rangepitchquotesrichnessspeak-headerspeak-numeralspeak-punctuationspeakspeech-ratestresstext-aligntext-indenttext-transformvisibilityvoice-familyvolumewhite-spacewidowsword-spacing
Puedes obtener más información acerca de esta lista en el sitio web del W3C (¡definitivamente no necesitas memorizar todo esto!).
Cómo forzar la herencia de las propiedades
Ya que algunas propiedades no pueden ser heredadas, quizá pienses que la solución es aplicarlas a los elementos hijos también. Los estilos que usamos anteriormente podrían verse de esta manera:
1 |
.main-list { |
2 |
border: 1rem solid #000; |
3 |
color: red; |
4 |
font-family: Verdana |
5 |
}
|
6 |
|
7 |
.sub-list { |
8 |
border: 1rem solid #000; |
9 |
}
|
Aún tendríamos estilos border solamente en la lista padre y en la primera sub-lista. Pero el problema es que hemos tenido que hacer una repetición. La molestia de copiar el mismo estilo una y otra vez se vuelve evidente.
Una buena solución sería aquella en la que solamente es necesario aplicar el estilo una vez, de preferencia en el padre, y hacer pequeños ajustes en el hijo para heredarlo. Esto mantendrá todo limpio.
La palabra clave Inherit
De acuerdo a los documentos de MDN:
"La palabra clave inherit de CSS hace que el elemento al cual se aplica tome el valor calculado de la propiedad de su elemento padre". –
MDN
En otras palabras, es una manera de decir que el valor de una propiedad en particular debe obtenerse a partir del padre del elemento. Esta palabra clave puede ser usada en cualquier propiedad CSS.
Volviendo a nuestro ejemplo, esta es la manera en la que se vería el estilo:
1 |
.main-list { |
2 |
border: 1rem solid #000; |
3 |
color: red; |
4 |
font-family: Verdana; |
5 |
}
|
6 |
|
7 |
.sub-list { |
8 |
border: inherit; |
9 |
}
|
Con eso, el resultado tendrá esta apariencia:
Por lo tanto, si fuera necesario cambiar nuestros estilos border en algún momento, solamente necesitaríamos cambiarlos en un lugar.
Cómo forzar a las propiedades para que no sean heredadas
Si bien es posible forzar la herencia en las propiedades que no son heredables de forma predeterminada, en algunos casos puede tener sentido no hacerlo. Una alternativa es hacer uso de los valores iniciales de la propiedad.
La palabra clave Initial
Puedes establecer el valor inicial o predeterminado de una propiedad CSS mediante el uso de la palabra clave initial de CSS. Esto ocasionará que el valor heredado de la propiedad regrese a su valor inicial.
En este ejemplo suceden un par de cosas. Tenemos dos elementos div cuyas propiedades de color rojo son heredadas por los elementos h1 y p anidados en el interior. Sin embargo, también aplicamos un estilo h1 global (color azul), pero nos aseguramos de que el segundo h1 no herede ningún estilo de la siguiente manera:
1 |
h1 { |
2 |
color: blue; |
3 |
}
|
4 |
|
5 |
div { |
6 |
border: 1rem solid #000; |
7 |
color: red; |
8 |
font-family: Verdana; |
9 |
margin-bottom: 10px; |
10 |
}
|
11 |
|
12 |
.berries h1 { |
13 |
color: initial; |
14 |
}
|
Nuestro h1 en el bloque .berries vuelve a tener el color que el navegador haya aplicado originalmente. Así es como se ve eso:
Otras palabras clave para la herencia en CSS
Además de las palabras clave inherit e initial, también podemos usar revert y unset. De hecho, estas alternativas se recomiendan porque initial puede generar algunos resultados inesperados.
La palabra clave Unset
La palabra clave unset es sutilmente diferente. Esta restablece el valor de un elemento al valor heredado, si es que heredó uno, y a su valor inicial si no es así. Aquí tenemos nuestro ejemplo de nuevo:
1 |
h1 { |
2 |
color: blue; |
3 |
}
|
4 |
|
5 |
div { |
6 |
border: 1rem solid #000; |
7 |
color: red; |
8 |
font-family: Verdana; |
9 |
margin-bottom: 10px; |
10 |
}
|
11 |
|
12 |
.berries h1 { |
13 |
color: unset; |
14 |
}
|
En este caso, la propiedad color de nuestro segundo h1 regresa a su valor heredado (rojo) en vez de a su valor inicial (negro):
La palabra clave Revert
Por último tenemos la palabra clave revert, que funciona de manera similar a unset en la mayoría de los casos. Esta restablece la propiedad a su valor heredado (si hereda de su padre), o al valor predeterminado establecido por la propia hoja de estilo del usuario (si existe), o bien a los estilos del navegador.
Conclusión
Cuando se declara una regla de estilo en una hoja de estilo, hay muchos lugares de los que podría provenir el valor de la propiedad:
- La hoja de estilo definida por el autor web.
- Estilos definidos por el usuario.
- Estilos definidos por el navegador.
El lugar del que se obtienen los estilos depende de la manera en la que funciona la propiedad con respecto a la herencia. Si la propiedad es heredable entonces su valor vendrá de su padre, lo que será declarado en la hoja de estilo creada por el autor web. De lo contrario vendrá de la segunda o de la tercera fuente.
¡La herencia en CSS puede ser un poco confusa! espero que este tutorial te haya ayudado a comprenderla.
Aprende más acerca de los selectores de CSS
By
