Seletores e cascata

Quando duas regras dão cores diferentes ao mesmo elemento, o CSS não adivinha. Ele compara os seletores, e um id vence qualquer quantidade de classes.

Escolhendo elementos

Um seletor é um padrão que corresponde a elementos da página. Os mais simples escolhem pelo nome do elemento, pela classe ou pelo id. p é um seletor de tipo e corresponde a todo parágrafo. .note é um seletor de classe e corresponde a todo elemento com class="note"; um elemento pode ter várias classes separadas por espaços, e uma classe pode ser usada em muitos elementos. #intro é um seletor de id e corresponde ao único elemento com id="intro". *, o seletor universal, corresponde a tudo.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Combinando seletores

Uma vírgula agrupa seletores que têm as mesmas declarações, então h1, h2 estiliza os dois. Um espaço é o combinador descendente: nav a corresponde a links em qualquer lugar dentro de um nav, por mais fundo que estejam. > é mais rígido e só corresponde a filhos diretos. Escrever dois seletores simples juntos, sem espaço, como em a.active, quer dizer que um mesmo elemento precisa corresponder aos dois: um link que também tem a classe active. Seletores de atributo, entre colchetes, escolhem pelo atributo, como input[type="email"].

Pseudoclasses, escritas com dois-pontos simples, selecionam elementos num certo estado ou posição: :hover enquanto o ponteiro está em cima, :focus-visible quando o elemento tem o foco do teclado, :first-child quando é o primeiro filho do seu pai. Pseudoelementos, escritos com dois-pontos duplos, estilizam uma parte de um elemento, como ::first-line ou ::placeholder.

Quando as regras discordam

Muitas vezes várias regras definem a mesma propriedade no mesmo elemento. A cascata, o C de CSS, decide qual vence. Deixando de lado os estilos do próprio navegador e o !important, duas perguntas resolvem quase todos os casos. Primeira: qual seletor é mais específico? A especificidade é contada em três números: ids, depois classes (incluindo seletores de atributo e pseudoclasses), depois nomes de elementos. #menu a vale 1-0-1, .active vale 0-1-0 e nav a vale 0-0-2. Os números são comparados a partir da esquerda, então um id vence qualquer quantidade de classes. Segunda: se a especificidade é igual, vence a regra que vem depois na folha de estilo.

Atributos style inline vencem qualquer seletor, e uma declaração marcada com !important vence as normais. Os dois são remendos rápidos tentadores, mas dificultam a próxima mudança, porque o único jeito de sobrescrevê-los é usar mais do mesmo. A maioria das equipes mantém a especificidade baixa e uniforme, estilizando quase tudo com classes, para que a ordem no arquivo baste para prever o resultado.

Herança

Algumas propriedades passam do pai para o filho automaticamente. Defina color ou font-family no body e todo parágrafo, lista e célula de tabela lá dentro herda o valor, a menos que uma regra defina o seu. As propriedades ligadas ao texto em geral são herdadas; as ligadas à caixa, como width, padding, border e margin, não são, e é por isso que uma borda numa seção não aparece em volta de cada parágrafo dela. A palavra-chave inherit obriga uma propriedade a copiar o valor do pai.

Dê nome às classes pelo que a coisa é, não pela aparência. .warning continua fazendo sentido quando o designer troca a cor de vermelho para laranja; .red-text não. Ids são únicos, então é melhor guardá-los para alvos de links e rótulos de formulários do que para estilo, o que mantém a especificidade baixa.