Seletores são necessariamente uma das primeiras coisas que qualquer pessoa que começa a estudar CSS aprende. Existe uma quantidade enorme de seletores divididos entre as versões 1, 2 e 3 das CSS. infelizmente nem todos podem ser utilizados dependendo da versão do browser ao qual vai ser necessário dar suporte, uma boa forma de verificar se um determinado browser da suporte ou não a um seletor é o site caniuse

Saber utilizar de forma correta o maior numero de seletores possíveis ajuda a manter o seu template HTML mais fácil de entender já que ira minimizar muito no uso de ids, classes, divs e spans que muitas vezes colocamos no código simplismente para dar estilo a determinado elemento. Coisas que poderiam ser resolvidas com um simples seletor, como pegar o irmão adjacente, o primeiro elemento do tipo, um elemento com determinado atributo, etc… acabamos usando ids ou classes por não conhecer outra forma.

Mas o que necessariamente é um seletor CSS?

Seletores permitem que você selecione e manipule elementos HTML.

São utilizados para encontrar (ou selecionar) elementos HTML com base em seu id, classe, tipo, atributo e muito mais. – w3schools

Um seletor CSS nada mais é do que uma declaração em um formato que casa com todos os elementos na arvore do DOM (document object model) que tenham o mesmo padrão, quando essa condição é satisfeita o estilo vinculado á aquele seletor é então aplicado ao elemento. ex:

h2 { color: blue }

No CSS toda essa linha é uma regra, esta regra começa com h2 que é um seletor seguido pelo estilo que está entre {}. pode ser lido como selecione todos os elementos h2 e aplique a cor azul neles.

Conhecendo alguns seletores

como são inúmeros seletores, vou passar pelos que mais utilizo e que acho que são menos conhecidos pela maioria.

Seletor filho: P > F – versão CSS2
casa com todos os elementos F que são filhos diretos de P

main > p { color: purple }



Hello World!

Seletor irmão adjacente: I + E – versão CSS2
casa com elementos E que são colocados imediatamente após elementos I no DOM.

main + footer { height: 150px }



Seletor irmão subsequente: I ~ E – versão CSS3
casa com todos os elementos E que são precedidos pelo elemento I, ambos devem ter o mesmo pai entretanto E não tem de estar imediatamente após I. ex:

h2 ~ p { color: purple }



Hello World!

…

…

Seletor negação: :not(seletor) – versão CSS3
casa com todos os elementos que não seja o seletor passado entre parênteses. ex:

:not(p) { border: 1px solid } // estiliza todos os elementos com uma borda exceto

(paragrafos)

Hello World!

…

Seletor atributo: [atrr] – versão CSS2
casa com qualquer elemento que tenha o atributo especificado dentro dos colchetes.

a[target] { color: pink}

google

Atributo igual a valor: [attr=valor] – versão CSS2
casa com qualquer elemento que tenha o atributo e valor especificado dentro dos colchetes.

a[target=_blank] { color: pink}

google

Seletor primeiro filho: E:fist-child – versão CSS2
casa com todos os elementos E que sejam primeiro filho de seu pai.

p:first-child { color: purple }



Hello World!

Hello World!

Hello World!

Seletor ultimo filho: E:last-child – versão CSS3
casa com todos os elementos E que sejam ultimo filho de seu pai.

p:last-child { color: purple }



Hello World!

Hello World!

Hello World!

Existem muito outros seletores você pode encontrar uma referencia completa aqui w3schools então divirta-se experimente combinar vários seletores diferentes são inúmeras as possibilidades.