Núcleo Assistir /blog

O CSS permite o uso de herança entre os elementos “parentes” possibilitando assim que os filho herdem o estilo do pai.
Em casos de não sobrescrever o estilo padrão o estilo é herdado automaticamente pelos filhos, caso deseje forçar a herança de atributos que não se herdam automaticamente isso pode ser feito através do valor inherit no CSS.

Exemplo, temos esse código HTML

<div id="pai">
    <div>Filho 1</div>
    <div>Filho 2</div>
</div>

e queremos que a div pai tenha uma borda e todos as div’s filhas também tenham uma borda cada igual a do pai. O CSS ficaria assim:

div#pai { border:1px dashed black; }
div#pai div { border:1px dashed black; }

Dessa maneira teremos atingido o planejado, porém ser realmente usar herança pois tivemos que especificar o estilo para cada atributo, no caso se o estilo da borda do pai mudar precisaremos mudar o estilo do filho também. Para resolver esse problema, basta usarmos o valor inherit no estilo que queremos herdar e pronto, caso mude algo no estilo do pai o filho muda automaticamente, o novo CSS ficaria assim:

div#pai { border:1px dashed black; }
div#pai div { border:inherit; }

Com esse valor é possível usar herança de modo mais simples deixando o código mais legível e com maior manutenibilidade.