Como selecionar elementos HTML para aplicar estilos com CSS
Seletores são a parte do CSS que define quais elementos HTML vão receber um estilo. Antes de aplicar qualquer cor ou tamanho, o navegador precisa saber o que estilizar.
Existem vários tipos de seletores. Os mais usados no dia a dia são quatro.
Seleciona todos os elementos de um determinado tipo.
1p { 2 color: gray; 3}
Todos os parágrafos da página ficarão cinza.
Seleciona elementos que possuem um atributo class específico. No CSS, classes são indicadas com um ponto . antes do nome.
1<p class="destaque">Este parágrafo é destacado.</p> 2<p>Este não.</p>
1.destaque { 2 color: orange; 3 font-weight: bold; 4}
Só o parágrafo com class="destaque" vai receber o estilo. Classes são reutilizáveis: você pode aplicar a mesma classe em quantos elementos quiser.
Seleciona um único elemento que possui um id específico. No CSS, IDs são indicados com # antes do nome.
1<h1 id="titulo-principal">Bem-vindo</h1>
1#titulo-principal { 2 color: navy; 3 font-size: 40px; 4}
IDs devem ser únicos na página: cada id pode aparecer apenas uma vez por documento HTML.
Seleciona todos os elementos da página de uma vez.
1* { 2 margin: 0; 3 padding: 0; 4}
Muito usado para "zerar" estilos padrão do navegador antes de começar a estilizar a página.
Quando dois ou mais elementos compartilham o mesmo estilo, você pode agrupá-los separando com vírgula. Isso evita repetição.
1/* Sem agrupamento */ 2h1 { color: navy; } 3h2 { color: navy; } 4
Os dois blocos fazem a mesma coisa. O agrupado é mais fácil de manter.
Quando um elemento é selecionado por mais de um seletor, o navegador precisa decidir qual estilo aplicar. Ele usa uma regra chamada especificidade para isso.
#id) tem maior especificidade que seletor de classe (.classe), que por sua vez tem maior especificidade que seletor de elemento (elemento).1/* Seletor de elemento */ 2p { 3 color: gray; 4} 5 6/* Seletor de classe */