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)
versão SVG com personalização de cores para impressão desta tabela (link abre em nova janela).

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

Incorporamos nesta página, para cada um dos seletores estudados, com uso de IFRAME para o JSFiddle, exemplos que demonstram o efeito de estilização. Você poderá complementar seus estudos clicando o link existente no canto superior direito do IFRAME e editando os códigos dos exemplos de modo interativo.

Seletor universal

♦ Casa com qualquer elementoOs 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.

* {
  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 tipoSintaxe: 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 atributoSintaxe: E["foo"]

Exemplo:

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

valor de um atributo

♦ Casa com elementos com determinado valor de atributoSintaxe: 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çoSintaxe: 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 stringSintaxe: 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 stringSintaxe: 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 documentoSintaxe: :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 paiSintaxe: 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çãoSintaxe: 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 tipoSintaxe: 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çãoSintaxe: 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 paiSintaxe: 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 paiSintaxe: 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 tipoSintaxe: 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 tipoSintaxe: 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 paiSintaxe: 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 tipoSintaxe: 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 visitadoSintaxe: a:link

Exemplo:

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

link visitado

♦ Casa com o elemento que é um link que já foi visitadoSintaxe: a:visited

Exemplo:

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

ativo

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

Exemplo:

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

sobre

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

Exemplo:

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

foco

♦ Casa com o elemento que por ação do usuário a ele foi dado o focoSintaxe: 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 linkSintaxe: E:target

Exemplo:

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

idioma

♦ Casa com o elemento que foi marcado em determinado idiomaSintaxe: 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 desabilitadoSintaxe: 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 marcadoSintaxe: 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 elementoSintaxe:
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 elementoSintaxe:
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 elementoSintaxe: 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 elementoSintaxe: 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 seletorSintaxe: 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 classeSintaxe: 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 idSintaxe: E#foo

Exemplo:

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

Seletor descendente

♦ Casa com o elemento que descende de determinado elementoSintaxe: E F

Exemplo:

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

Seletor filho

♦ Casa com o elemento filho de determinado elementoSintaxe: 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 elementoSintaxe: 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 elementoSintaxe: E~F

Exemplo:

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

O IE outra vez! 😦

Os seletores CSS3 são suportados pelos navegadores modernos. Para servir os seletores das CSS3 aos navegadores Internet Explorer 6 até 8 use uma pequena biblioteca JavaScript (4K) chamada Selectivizr.

Basta adicionar o seguinte código na seção head do documento:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  http://selectivizr.js
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Boa sorte com os poderosos seletores das CSS!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s