Gramática Avançada do CSS

Agrupamento de seletores

Você pode agrupar seletores, então os seletores agrupados podem compartilhar declarações comuns. Separe os seletores que precisam ser agrupados com vírgulas. No exemplo a seguir, agrupamos todos os elementos de título. Todos os elementos de título são verdes.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Herança e seus problemas

De acordo com o CSS, os elementos filhos herdarão as propriedades do elemento pai. Mas isso não acontece sempre dessa maneira. Olhe para a regra a seguir:

body {
     font-family: Verdana, sans-serif;
     }

De acordo com essa regra, o elemento body do site usará a fonte Verdana (se o sistema do visitante tiver essa fonte).

Através da herança do CSS, os elementos filhos herdarão as propriedades do elemento mais alto (no caso, o body) que possui (esses elementos filhos são p, td, ul, ol, ul, li, dl, dt e dd). Não é necessário mais regras, todos os elementos filhos do body devem exibir a fonte Verdana, assim como os elementos filhos dos elementos filhos. E isso é verdade em grande parte dos navegadores modernos.

Mas naquela era sangrenta da guerra de navegadores, isso não necessariamente aconteceria, naquela época o suporte aos padrões não era a prioridade das empresas. Por exemplo, o Netscape 4 não suporta herança, ele não apenas ignora a herança, mas também ignora as regras aplicadas ao elemento body. O IE/Windows até o IE6 ainda tinha problemas relacionados, os estilos de fonte dentro das tabelas seriam ignorados. Então, o que devemos fazer?

Seja gentil com o Netscape 4

Felizmente, você pode usar a regra redundante chamada "Seja Gentil com o Netscape 4" para lidar com problemas de herança que os navegadores antigos não conseguem entender.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Os navegadores 4.0 não entendem a herança, mas eles podem entender o seletor de grupo. Embora isso possa desperdiçar um pouco da largura de banda dos usuários, se for necessário suportar usuários Netscape 4, é necessário fazer isso.

Herança é uma maldição?

Se você não deseja que a fonte "Verdana, sans-serif" seja herdada por todos os elementos filhos, o que fazer? Por exemplo, você deseja que a fonte do parágrafo seja Times. Não há problema. Crie uma regra especial para p, então ela escapará das regras do elemento pai:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }