Seletores CSS

O que você vai ver aqui!

Os seletores CSS são usados para “encontrar” (ou selecionar) os elementos HTML que você deseja estilizar.

O seletor de id CSS

O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único!

O seletor de classe CSS

O seletor de classe seleciona elementos HTML com um atributo de classe específico. Para selecionar elementos com uma classe específica, escreva um ponto (.), Seguido do nome da classe.

O seletor universal CSS

O seletor universal (*) seleciona todos os elementos HTML na página.

O seletor de agrupamento CSS

O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo. Observe o seguinte código CSS (os elementos h1, h2 e p têm as mesmas definições de estilo):

Seletores combinados

Um seletor CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.

seletor descendente (espaço)
seletor filho (>)
seletor irmão adjacente (+)
seletor irmão geral (~)

Elemento	p	Seleciona todos <p>
Elemento, elemento	div, p	Seleciona todos <div> e todos elementos <p>
Elemento elemento	div div	Seleciona todos elementos <p> dentro de elementos <div>
Elemento > elemento	div > div	Seleciona todos <p> onde o pai é um elemento <div>
Elemento + elemento	div + div	Seleciona todos <p> que estão imediatamente depois de um elemento <div>
Elemento1 ~ elemento2	div ~div	Seleciona todo elemento <ul> que precede um elemento <p>

Seletor CSS [atributo]

O [attribute]seletor é usado para selecionar elementos com um atributo especificado.

[attribute]	[target]	Seleciona todos os elementos com um atributo target.
[attribute=value]	[target=_blank]	Seleciona todos os elementos com target=”_blank”
[attribute~=value]	[title~=flower]	Seleciona todos os elementos com um atributo title contendo a palavra “flower”
[attribute\|=value]	[lang\|=pt-br]	Seleciona todos os elementos com um atributo lang, cujo o atributo valor comece com “pt-br”
[attribute^=value]	a[href^=”https”]	Seleciona todo elemento <a> que tem um atributo href com o valor começando com “https”
[attribute$=value]	a[href$=”.pdf”]	Seleciona todo elemento <a> que tem um atributo href com o valor termina com “.pdf”
[attribute*=value]	a[href*=”tableless”]	Seleciona todo elemento <a> que tem um atributo href com o valor contém “tableless”