css-inherit

En esta entrada explicaremos qué es la propiedad inherit, además de profundizar un poco en ella. Vamos a sus orígenes:

¿Qué es inherit?

¿No te preguntaste alguna vez cómo podías definir la herencia entre los estilos? De eso trata inherit. Inherit es una característica que tiene CSS por la cual podemos obtener la herencia entre estilos, aplicando al selector hijo las mismas propiedades que el padre. Por ejemplo, usaremos este encabezado con un color negro:

h2 {
   color: black;
text-align: center;
}

Si queremos definir las mismas características en el enlace del encabezado, no tenemos porqué volver a escribir el mismo color, usaremos inherit:

h2 a {
   color:inherit;
}

Así el color del enlace (black) lo heredará del elemento padre (p). Así si tenemos muchas propiedades anidadas solo tendremos que modificar el color del padre para aplicarselo al hijo.

La propiedad inherit de CSS no es soportada por Internet Explorer 7 y versiones anteriores. Se puede arreglar para que sea compatible mediante una solución un tanto casera.

Aplicar inherit a Internet Explorer

Internet Explorer 7 y versiones anteriores no acepta esta propiedad, así que para simularla deberemos, mediante una expresión, obtener el color del elemento padre:

h2 a{
   color:expression(
    this.parentNode.currentStyle.color ?
    this.parentNode.currentStyle.color :
    'black');
;
}

Un forma un poco extraña de simular la propiedad inherit en Internet Explorer (7 y versiones anteriores) pero que da resultado 🙂