Combinação e aninhamento de tutorial intermediário CSS

combinação

Você não precisa repetir vários seletores com os mesmos atributos, basta separar os seletores com vírgulas (,).
Por exemplo, você tem o seguinte código:

h2 { cor: vermelho; } .estaOutraClasse { cor: vermelho; } .yetAnotherClass { cor: vermelho; }

Então você pode escrever:

h2, .thisOtherClass, .yetAnotherClass { cor: vermelho; }

Aninhado

Se o CSS estiver bem estruturado, não há necessidade de usar muitas classes ou seletores de identificadores. Isso ocorre porque você pode especificar seletores dentro dos seletores. (Ou melhor dizendo, seletor de contexto - por tradutor)
por exemplo:

#principal { cor de fundo: #ccc; preenchimento: 1em } #top h1 { cor: #ff0; } #top p { cor: vermelho; peso da fonte: negrito; }

Isso elimina seletores desnecessários de classes ou identificadores se aplicados ao HTML assim:

<div id="topo"> <h1>Curry de chocolate</h1> <p>Esta é a minha receita para fazer curry só com chocolate</p> <p>Mmm mm mmmmmm</p> </div>

Isso ocorre porque, usando seletores ingleses separados por espaço de meia largura, especificamos que h1 no ID ID tem a cor "#ff0", enquanto p é vermelho e em negrito.
Isso também pode ser um pouco complicado (já que pode haver mais de dois níveis, como dentro, dentro, dentro, dentro, etc.). Você precisa praticar mais.