El valor INHERIT

El valor inherit del CSS tiene la funcionalidad de establecer su valor heredado del Elemento HTML Padre, es decir, tomará el valor que tiene establecido el Elemento HTML que lo contiene.

El valor inherit del CSS tiene la funcionalidad de establecer su valor heredado del Elemento HTML Padre, es decir, tomará el valor que tiene establecido el Elemento HTML que lo contiene.

El valor inherit es un "keyword" o "Palabra Reservada" del lenguaje CSS. Lo que significa que su escritura en el códido CSS debe ser estrictamente como es esta "cadena de caracteres".

El valor inherit puede ser usada en cualquier propiedad CSS y en cualquier Elemento HTML.

Para las propiedades heredadas, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Para las propiedades no heredadas, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.

Sintaxis CSS

nombre_propiedad : inherit ;

Ejemplos de uso

Código CSS:

h2 { color: red; }
main { color: blue; }
aside { color: green; }
aside h2 { color: inherit; }

Código HTML:

<body>
  <h2>Título h2 en raiz</h2>
  <main>
    <h2>Título h2 en main</h2>
    <p>Esto es un párrafo en main</p>
  </main>
  <aside>
    <h2>Título h2 en aside</h2>
    <p>Esto es un párrafo en aside</p>
  </aside>
</body>

Muestra:

Título h2 en raiz

Título h2 en main

Esto es un párrafo en main

Explicación:

  • La primera regla CSS establece que todos los Títulos de Encabezado h2 se visualizarán en color rojo.
  • La segunda regla CSS establece al Elemento main que sus textos se visualizarán en color azul, pero:
    • dado que la primera regla CSS aplica en cascada; el titulo de encabezado h2 anidado en main es visualizado en rojo y no en azul,
    • pero el párrafo; este si es visualizado en color azul, aplicando el color establecido para main.
  • La tercera regla CSS establece al elemento aside que sus texto se visualizado en color verde, y el comportamiento es el mismo que en main.
  • la cuarta regla CSS establece que los títulos de encabezado h2, anidados en aside su color es heredado de su elemento padre, así oblica a visualizarlo en color verde, anulando la primera regla.