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.
Carregando...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.
Carregando...Carregando...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.
Carregando...Carregando...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.
Carregando...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.
Carregando...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).Carregando...