Guia completo dos Seletores CSS3

Introdução

O Módulo das CSS3 denominado "Selectors Level 3" atingiu, em 29 de setembro de 2011, o status de Recomendação do W3C. Essa Recomendação descreve os seletores já existentes nas CSS1 e CSS2 e cria novos seletores para as CSS3.

Seletores são "padrões" ou "modelos" que casam com os elementos de uma árvore do documento e portanto podem ser usados para selecionar os nós de um documento XML. Seletores foram otimizados para serem usados com as linguagens de marcação HTML e XML.

CSS (Cascading Style Sheets) é uma linguagem para descrever a renderização de documentos HTML e XML em uma tela, em papel, em sintetizadores de voz, etc.

As CSS usam seletores para atrelar propriedades de estilização aos elementos de um documento.

Tabela de seletores

Padrão Casa com Tipo CSS
* qualquer elemento Seletor universal 2
E elementos do tipo E Seletor tipo 1
E[foo] elementos com o atributo "foo" Seletor atributo 2
E[foo="bar"] elementos E cujo valor do atributo "foo" é exatamente igual a "bar" Seletor atributo 2
E[foo~="bar"] elementos E cujo valor do atributo "foo" é uma lista de valores separados por espaço, um dos quais é exatamente igual a "bar" Seletor atributo 2
E[foo^="bar"] elementos E cujo valor do atributo "foo" começa exatamente com a string "bar" Seletor atributo 3
E[foo$="bar"] elementos E cujo valor do atributo "foo" termina exatamente com a string"bar" Seletor atributo 3
E[foo*="bar"] elementos E cujo valor do atributo "foo" contém a substring "bar" Seletor atributo 3
E[foo|="en"] elementos E cujo atributo "foo" tem uma lista de valores começando com "en" e seguida por um hífen Seletor atributo 2
E:root elemento E raiz do documento Pseudo-classe estrutural 3
E:nth-child(n) elemento E que é o enésimo filho do seu elemento pai Pseudo-classe estrutural 3
E:nth-last-child(n) elemento E que é o enésimo filho (contado de trás para frente) do seu elemento pai Pseudo-classe estrutural 3
E:nth-of-type(n) elemento E que é o enésimo irmão do seu tipo Pseudo-classe estrutural 3
E:nth-last-of-type(n) elemento E que é o enésimo irmão (contado de trás para frente) do seu tipo Pseudo-classe estrutural 3
E:first-child elemento E que é o primeiro filho de seu elemento pai Pseudo-classe estrutural 2
E:last-child elemento E que é o último filho de seu elemento pai Pseudo-classe estrutural 3
E:first-of-type elemento E que é o primeiro irmão de seu tipo Pseudo-classe estrutural 3
E:last-of-type elemento E que é o último irmão de seu tipo Pseudo-classe estrutural 3
E:only-child elemento E que é o único filho de seu elemento pai Pseudo-classe estrutural 3
E:only-of-type elemento E que é irmão único do seu tipo Pseudo-classe estrutural 3
E:empty elemento E que não tem elementos filhos (inclusive nós de texto) Pseudo-classe estrutural 3
E:link
E:visited		 elemento E que sendo destino de um link ainda não foi visitado (:link) ou que já tenha sido visitado (:visited) Pseudo-classe link 1
E:active
E:hover
E:focus		 elemento E durante determinadas ações do usuário Pseudo-classe ação do usuário 1 e 2
E:target elemento E que é o destino de um fragmento identificador de um URI Pseudo-classe :target 3
E:lang(pt-br) elemento E em um determinado idioma - "exemplo: pt-br" Pseudo-classe :lang() 2
E:enabled
E:disabled		 elemento E de uma interface de usuário que está habilitado (:enabled) ou desabilitado (:disabled) Pseudo-classe estado do elemento UI 3
E:checked elemento E de uma interface de usuário que está marcado (:checked) (por exemplo: radio-button ou checkbox) Pseudo-classe estado do elemento UI 3
E::first-line primeira linha formatada do elemento E Pseudo-elemento ::first-line 1
E::first-letter primeira letra formatada do elemento E Pseudo-elemento ::first-letter 1
E::before conteúdo gerado antes do elemento E Pseudo-elemento ::before 2
E::after conteúdo gerado depois do elemento E Pseudo-elemento ::after 2
E.foo elemento E cujo valor da classe é "foo" Seletor classe 1
E#foo elemento E cujo valor do atributo ID é "foo". Selector ID 1
E:not(seletor) elemento E que não casa com o seletor simples seletor Pseudo-classe negação 3
E F elemento F descendente do elemento E Elemento descendente 1
E > F elemento F filho do elemento E Elemento filho 2
E + F elemento F imediatamente precedido pelo elemento E Elemento irmão adjacente 2
E ~ F elemento F precedido pelo elemento E Elemento irmão geral 3

Criei versões HTML, PNG e SVG desta tabela otimizadas para impressão. Que tal imprimir a tabela e tê-la na sua mesa de trabalho para uma referência e consulta rápida?
— versão HTML para impressão desta tabela (link abre em nova janela)
— versão PNG para impressão desta tabela (link abre em nova janela)

Vamos estudar a seguir cada um dos seletores constantes da tabela.

A interface interativa para cada um dos seletores foi hospedada no JSFiddle e o respectivo link para aquela interface encontra-se ao final do texto explicativo de cada seletor.

Seletor universal

♦ Casa com qualquer elemento

Os conteúdos de cada um dos elementos da marcação, ao serem renderizados em um navegador, são estilizados com regras CSS mínimas (por exemplo: cor e tipo de fonte, margens, paddings, etc.) que fazem parte de uma folha de estilos nativa do navegador e que na ordem de cascata tem a prioridade mais baixa, ou seja, qualquer declaração de estilo do autor ou usuário sobrescreve a folha de estilos nativa.

Não existe uma padronização para essa folha de estilos e cada navegador implementa sua própria folha de estilos nativa. Como consequência ocorrem inconsistências de renderização, em relação a estilização básica, entre navegadores.

Destas inconsistências a que produz maiores transtornos é a não padronização dos valores para as propriedades margin e padding.

A principal utilização do seletor universal é "zerar" essas propriedades para todos os elementos da marcação. Como consequência o autor terá que definir explicitamente para cada elemento, na sua folha de estilos, aqueles valores.

CSS
* {
  margin: 0;
  padding: 0;
}

O seletor universal quando declarado de forma contextual pode produzir resultados interessantes. Observe os exemplos a seguir:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor tipo

♦ Casa com elementos de um determinado tipo

Sintaxe: E

Usado para estilizar os elementos da marcação que são de um mesmo tipo; por exemplo: elemento do tipo p (parágrafo), do tipo div, do tipo ol, do tipo strong, e assim por diante.

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletores de atributo

♦ Casam com elementos cujo atributo satisfaçam determinadas condições

presença de um atributo

♦ Casa com elementos que contenham um determinado atributo

Sintaxe: E["foo"]

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

valor de um atributo

♦ Casa com elementos com determinado valor de atributo

Sintaxe: E[foo="bar"]

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

valor de um atributo pertence a uma lista de valores separados por espaço

♦ Casa com elementos cujo valor de atributo pertença a uma lista de valores separados por espaço

Sintaxe: E[foo~="bar"]

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

valor de um atributo começa com string

♦ Casa com elementos cujo valor de atributo começa com uma determinada string

Sintaxe: E[foo^="bar"]

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

valor de um atributo termina com string

♦ Casa com elementos cujo valor de atributo termina com uma determinada string

Sintaxe: E[foo$="bar"]

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletores do tipo pseudo-classe

elemento raiz

♦ Casa com o elemento raiz do documento

Sintaxe: :root

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Nesse exemplo a cor dos elementos é herdada do elemento raiz.

enésimo filho

♦ Casa com o elemento que é o enésimo filho do seu elemento pai

Sintaxe: E:nth-child(n)

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

enésimo filho de trás para frente

♦ Casa com o elemento que é o enésimo filho do seu elemento pai, contado de trás para frente na marcação

Sintaxe: E:nth-last-child(n)

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

enésimo irmão do seu tipo

♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipo

Sintaxe: E:nth-of-type(n)

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

enésimo irmão do seu tipo de trás para frente

♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipo, contado de trás para frente na marcação

Sintaxe: E:nth-last-of-type(n)

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

primeiro filho

♦ Casa com o elemento que é o primeiro filho do seu elemento pai

Sintaxe: E:first-child

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

último filho

♦ Casa com o elemento que é o último filho do seu elemento pai

Sintaxe: E:last-child

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

primeiro do mesmo tipo

♦ Casa com o elemento que é o primeiro irmão (filhos do mesmo elemento pai) do mesmo tipo

Sintaxe: E:first-of-type

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

último do mesmo tipo

♦ Casa com o elemento que é o último irmão (filhos do mesmo elemento pai) do mesmo tipo

Sintaxe: E:last-of-type

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

único filho

♦ Casa com o elemento que é o único filho do seu elemento pai

Sintaxe: E:only-child

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

único irmão

♦ Casa com o elemento que é o único irmão (filhos do mesmo elemento pai) do mesmo tipo

Sintaxe: E:only-of-type

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

elemento vazio

♦ Casa com o elemento que não tem filhos (inclusive filhos do tipo nós de texto)

Sintaxe: E:empty

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

link

♦ Casa com o elemento que é um link não visitado

Sintaxe: a:link

Exemplo:

HTML
<a href="https://maujor.com">Site do Maujor</a>
CSS
a:link {
  color: red;
  text-decoration: none;
}

link visitado

♦ Casa com o elemento que é um link que já foi visitado

Sintaxe: a:visited

Exemplo:

HTML
<a href="https://maujor.com">Site do Maujor</a>
CSS
a:visited {
  color: orange;
  text-decoration: underline;
}

ativo

♦ Casa com o elemento que por ação do usuário foi tornado ativo

Sintaxe: a:active

Exemplo:

HTML
<a href="https://maujor.com">Site do Maujor</a>
CSS
:active {
  outline: 1px solid pink;
}

sobre

♦ Casa com o elemento que, por ação do usuário, teve um dispositivo apontador colocado sobre ele

Sintaxe: a:hover

Exemplo:

HTML
<a href="https://maujor.com">Site do Maujor</a>
CSS
a:hover {
  color: green;
  background: black;
}

foco

♦ Casa com o elemento que por ação do usuário a ele foi dado o foco

Sintaxe: E:focus

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Não existe uma padronização relacionando os elementos HTML que podem receber foco. Mas, em geral são eles:

  • Elemento a
  • Elemento area com atributo href
  • Elemento input
  • Elemento select
  • Elemento textarea
  • Elemento button (não desabilitado)
  • Elemento iframe
  • Elemento a
  • Qualquer elemento com o atributo tabindex

alvo

♦ Casa com o elemento que é o alvo do fragmento identificador de um link

Sintaxe: E:target

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

idioma

♦ Casa com o elemento que foi marcado em determinado idioma

Sintaxe: E:lang

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

habilitado ou desabilitado

♦ Casa com o elemento da interface de usuário que seja habilitado ou desabilitado

Sintaxe: E:enabled e E:disabled

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

marcado

♦ Casa com o elemento da interface de usuário que tenha sido marcado

Sintaxe: E:checked

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

primeira linha

♦ Casa com a primeira linha do texto formatado de um elemento

Sintaxe:
E:first-line — até as CSS2.1
E::first-line — modificada peals CSS3

As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes.

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Notas:

1 - Esse seletor aplica-se somente a elementos nível de bloco

2 - Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor

  • propriedades para fontes
  • propriedades para cores
  • propriedades para background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • text-shadow
  • line-height
  • clear

primeira letra

♦ Casa com a primeira letra do texto formatado de um elemento

Sintaxe:
E:first-letter — até as CSS2.1
E::first-letter — modificada pelas CSS3

As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes.

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Notas:

1 - Esse seletor aplica-se somente a elementos nível de bloco

2 - Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor

  • propriedades para fontes
  • propriedades para cores
  • propriedades para background
  • propriedades para margens
  • propriedades para padding
  • propriedades para bordas
  • text-decoration
  • vertical-align (para elementos não flutuados)
  • text-transform
  • text-shadow
  • line-height
  • float
  • clear

conteúdo antes

♦ Casa com o conteúdo gerado antes de um elemento

Sintaxe: E::before

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

conteúdo depois

♦ Casa com o conteúdo gerado depois de um elemento

Sintaxe: E:after

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

negação

♦ Casa com o elemento que não casa com determinado seletor simples seletor

Sintaxe: E:not(seletor)

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor classe

♦ Casa com o elemento que tem determinado valor para o atributo classe

Sintaxe: E.foo

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor ID

♦ Casa com o elemento que tem determinado valor para o atributo id

Sintaxe: E#foo

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor descendente

♦ Casa com o elemento que descende de determinado elemento

Sintaxe: E F

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor filho

♦ Casa com o elemento filho de determinado elemento

Sintaxe: E>F

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor que imediatamente sucede

♦ Casa com o elemento irmão que imediatamente segue-se a determinado elemento

Sintaxe: E+F

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor que sucede

♦ Casa com o elemento irmão que segue-se a determinado elemento

Sintaxe: E~F

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Boa sorte com os poderosos seletores das CSS!

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.