CSS
Efeito cascata, herança e especificidade do CSS
O efeito cascata do CSS é controlado pela especificidade e pela herança das propriedades.
Por Diego Eis
Herança
Existem algumas propriedades do CSS que quando aplicadas aos “elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color em um elemento div, o texto dos elementos contidos no div são coloridos de acordo com a propriedade.
1 2 3 | div { color: green; } |
O texto que há dentro deste div irá ter a cor verde, independente se este texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. A mesma coisa acontece para, por exemplo, a propriedade font-size.
Há também as propriedades não herdadas pelos “filhos”. Estas propriedades geralmente são propriedades referentes a formatação da caixa, como por exemplo a propriedade width, height, margin, padding e assim por diante.
Essa herança é responsável por uma parte da cascata. É aí que está uma das primeiras vantanges de se utilizar o CSS no desenvolvimento com padrões. A vantagem da herança é exatamente podermos modificar poucas linhas do CSS para fazer alterações no site inteiro, sem ter que caçar elemento por elemento e modificando suas propriedades.
A herança é largamente utilizada em frameworks de CSS ou até mesmo em técnicas para que a customização de layouts seja explorada de forma automática ou manual pelo cliente, como homes de portais, e-commerce etc. Assim, o controle fica mais genérico, e é aí que entra a especificidade do CSS para controlar o detalhe.
O valor INHERIT
O valor inherit é utilizada em propriedades destinadas aos elementos filhos. Suponha que você tem um elemento div. Este elemento div tem uma borda e você quer que seus filhos tenham a mesma borda. Veja o código:
1 2 3 4 | <div id="pai"> <div>um filho</div> <div>outro filho</div> </div> |
No CSS, o normal seria fazer isso:
1 2 3 4 5 6 7 | div#pai { border: 2px solid black; } div#pai div { border: 2px solid black; } |
Se você quisesse modificar a borda do pai e mesmo assim manter a borda do filho, teria que fazer das alterações no código. O valor inherit serve para que o filho sempre herde um determinado valor de uma determinada propriedade do pai. Quando o valor do pai muda, o valor do filho também. Veja o código e o exemplo.
1 2 3 4 5 6 7 | div#pai { border: 2px solid black; } div#pai div { border: inherit; } |
Especificidade
A especificidade define os detalhes. Quando você define no body as propriedades font-family, font-size, essas propriedades são herdadas por toda árvore de elementos do documento. Isso tráz uma uniformidade para o texto, mas nem todos os elementos terão esse valor genérico de font, logo você terá que ser mais específico e definir valores diferentes de font para estes elementos. É aí que a mágica acontece.
Suponha que você tenha o seguinte código:
1 2 3 4 5 6 7 8 | <div class="content"> <p> Vivamus in leo lacus. <em>Nam condimentum viverra odio</em>, non molestie orci commodo sit amet. <strong><em>Proin aliquet leo eu</em></strong> ipsum adipiscing tristique vestibulum nunc gravida. In porta dignissim enim sit amet vulputate. Quisque lacinia malesuada convallis. Sed sit amet orci non lacus sollicitudin pellentesque. </p> </div> <p> Vivamus in leo lacus. <em>Nam condimentum viverra odio</em>, non molestie orci commodo sit amet. <strong><em>Proin aliquet leo eu</em></strong> ipsum adipiscing tristique vestibulum nunc gravida. In porta dignissim enim sit amet vulputate. Quisque lacinia malesuada convallis. Sed sit amet orci non lacus sollicitudin pellentesque. </p> |
E também o código CSS:
1 2 3 | em { background: red; } |
Definimos no código acima que os elementos em terão o background vermelho. Isso irá capturar os 4 elementos em que colocamos no HTML. Correto? Ótimo. Estamos sendo bem genéricos aqui. Ele irá capturar todos os elementos em, não importa onde ele esteja. Vamos analisar outro código CSS:
1 2 3 4 5 6 7 | em { background: red; } div p em { background: green; } |
Já mudamos toda a história com este seletor. Queremos dizer que apenas os em que estão dentro de p e que por sua vez estão dentro de um div terão o background verde. Deixamos a regra mais específica excluindo todos os elementos em que estão fora do div. Os em que estão fora do div continuam com o background vermelho.
No caso acima, a ordem não altera o resultado da renderização. O seletor mais específico sempre é o que vai funcionar.
Essa explicação é bem básica. Contudo, entendendo como ela funciona, você sabe o que acontece com seletores mais complexos.
O valor !important
A especificidade apresenta muitos problemas quando a equipe é grande e o código CSS está gigante. Você tenta fazer uma alteração em um determinado objeto, e nada funciona. Isso acontece porque alguém já definiu um seletor mais específico que o seu e definiu um valor diferente para sua propriedade, e isso te impede de fazer a alteração que precisa. Essa seria uma cena clássica, mas há outros cenários cujo o uso do valor !important.
O !important indica que aquela propriedade sempre será a principal, e que nunca será substituída mesmo que o seletor seja mais complexo. Veja:
1 2 3 4 5 6 7 | p { color: black; } div p { color: red; } |
No código acima, o parágrafo terá a cor vermelha por conta do seletor div p ser mais específico.
1 2 3 4 5 6 7 | p { color: black !important; } div p { color: red; } |
Agora, mesmo o seletor div p sendo mais específico, ele não controlará o elemento. O !important está jogando toda a relevancia para o color: black;.
Use com cuidado. Se você colocar muitos !important no seu código, a utilidade deste valor se perderá. Veja o exemplo.
Pingback: Aula n.7 – Curso de HTTM, CSS e Javascript em Joinville
Pingback: Clica Aqui » Digest 06/09: Técnicas de CSS
Pingback: Clica Aqui » nth-child
Pingback: Introdução: diversidade dos meios acesso | Boas práticas de Desenvolvimento com Padrões Web
Pingback: Herança, especificidade e efeito cascata na CSS: Como funciona? | Ramon Victor
Pingback: Especificidade de Seletores CSS | Tableless - Desenvolvimento com Padrões Web
Pingback: Efeito cascata, herança e especificidade do CSS « K4M1K4Z3 {B.I.}