Para começar vamos a uma visão geral dos novos seletores CSS 3:
Visão geral da sintaxe para seletores CSS 3
| Selector type |
Pattern |
Description |
| Seletor para sub string de atributo |
E[att^="val"] |
Casa com qualquer elemento E cujo valor do atributo att começa com "val". |
| Seletor para sub string de atributo |
E[att$="val"] |
Casa com qualquer elemento E cujo valor do atributo att termina com "val". |
| Seletor para sub string de atributo |
E[att*="val"] |
Casa com qualquer elemento E cujo valor do atributo att contenha a sub string "val". |
| Pseudo classe estrutural |
E:root |
Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML. |
| Pseudo classe estrutural |
E:nth-child(n) |
Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai. |
| Pseudo classe estrutural |
E:nth-last-child(n) |
Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho. |
| Pseudo classe estrutural |
E:nth-of-type(n) |
Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo. |
| Pseudo classe estrutural |
E:nth-last-of-type(n) |
Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho |
| Pseudo classe estrutural |
E:last-child |
Casa com qualquer elemento E que seja o último filho do elemento pai. |
| Pseudo classe estrutural |
E:first-of-type |
Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo. |
| Pseudo classe estrutural |
E:last-of-type |
Casa com qualquer elemento E que seja o último elemento irmão do seu tipo. |
| Pseudo classe estrutural |
E:only-child |
Casa com qualquer elemento E que seja o único filho do elemento pai. |
| Pseudo classe estrutural |
E:only-of-type |
Casa com qualquer elemento E que seja o único elemento irmão do seu tipo. |
| Pseudo classe estrutural |
E:empty |
Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto). |
| Pseudo classe :target |
E:target |
Casa com um elemento E que seja o destino da URL. |
| Pseudo classe estado de elemento de UI |
E:enabled |
Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled). |
| Pseudo classe estado de elemento de UI |
E:disabled |
Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled). |
| Pseudo classe estado de elemento de UI |
E:checked |
Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked). |
| Pseudo-elemento fragmentos de elemento de UI |
E::selection |
Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário. |
| Pseudo classe negação |
E:not(s) |
Casa com qualquer elemento E que não case com o seletor simples s. |
| Elemento de combinação irmão em geral |
E ~ F |
Casa com qualquer elemento F que seja precedido pelo elemento E. |
A tabela acima parecer confusa. Cada um dos
seletores listados será descrito com detalhes e exemplos de uso serão
mostrados neste artigo.
Seletores para sub string de atributo
Este é um novo grupo de seletores que possibilita aos desenvolvedores
usar sub strings de um atributo para casar o seletor com um elemento.
Suponha a seguinte estrutura de marcação HTML em um documento:
- <div id="nav-primary"></div>
- <div id="content-primary"></div>
- <div id="content-secondary"></div>
- <div id="tertiary-content"></div>
- <div id="nav-secondary"></div>
Com o uso do seletor para sub strings de atributo você pode casar combinações das partes estruturais do documento.
A regra a seguir define uma cor de fundo para todos os elementos DIV que tenha seu nome de ID iniciado por "nav":
- div[id^="nav"] { background:#ff0; }
Para este nosso exemplo o seletor casa com div#nav-primary e div#nav-secondary.
Para casar com os elementos DIV que tenham seu nome de ID terminado por "primary" você poderia usar a seguinte regra:
- div[id$="primary"] { background:#ff0; }
Agora o seletor casa com div#nav-primary e div#content-primary.
A regra a seguir define uma cor de fundo para todos os elementos DIV que contenha no seu nome de ID a sub string "content":
- div[id*="content"] { background:#ff0; }
Os elementos casados por esta regra são div#content-primary, div#content-secondary, and div#tertiary-content.
Os seletores para sub string de atributo são atualmente suportados
pelas últimas versões dos navegadores Mozilla, Firefox, Flock, Camino,
Safari, OmniWeb, e Opera, assim se eles não se destinarem ao Internet
Explorer poderemos desde já usá-los.
A pseudo classe :target
Considere URLs com link para um fragmento identificador (um sinal
tralha "#", seguido por um nome de âncora ou uma ID de um elemento)
apontando para um determinado elemento dentro do próprio documento. O
elemento para o qual a URL aponta é o destino (target) e a pseudo classe
:target possibilita casar aquele elemento. Se a URL não contém um fragmento identificador a pseudo classe :target não casa com qualquer elemento (NT: não funciona).
Conside a estrutura HTML mostrada nop exemplo anterior.
A regra a seguir coloca uma linha de destaque (outline) em volta da
div#content-primary quando a URL contiver este fragmento identificador:
- div#content-primary:target { outline:1px solid #300; }
Um exemplo de URL contendo o fragmento identificador mencionado é:
http://www.example.com/index.html#content-primary.
A pseudo classe :target é atualmente suportada por navegadores baseados em Mozilla e Safari.
Pseudo classe estado de elemento de UI
As pseudo classes :enabled e :disabled
As pseudo classes :enabled e :disabled permite aos desenvolvedores
controlar a aparência de elementos da interface do usuário (controle de
formulários) que estejam habilitados ou desabilitados (enabled ou
disabled) em navegadores que permitem estilizar formulários. As
seguintes regras definem cores de fundo distintas para inputs de textos
dependendo de estarem habilitados ou desabilitados:
- input[type="text"]:enabled { background:#ffc; }
- input[type="text"]:disabled { background:#ddd; }
A pseudo classe :checked
A pseudo classe :checked permite aos desenvolvedores controlar a
aparência dos elementos radio e elementos checkbox. Novamente, em
navegadores que permitem estilizar formulários. A regra CSS a seguir define uma borda verde para os elementos radio e checkbox que estiverem marcados (checked):
- input:checked { border:1px solid #090; }
A pseudo classe estado de elemento UI é atualmente suportada por navegadores Opera e navegadores baseados em Mozilla.
Covém notar que muitos navegadores limitam ou restringem aos
desenvolvedores as possibilidades de introduzir modificações na
aparência dos controles de formulários. Para saber mais sobre estas
restrições leia meu artigo Styling form controls e Styling even more form controls.
Pseudo classes estruturais
As pseudo classes estruturais permitem aos desenvolvedores casar
elementos baseados em informações disponíveis na árvore do documento e
que não possam ser casados por seletores simples ou seletores
combinados. As pseudo classes estruturais são poderosas mas,
infelizmente os navegadores atuais suportam algumas poucas destas pseudo
classes.
A pseudo classe :root
A pseudo classe :root casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML. As regras de estilo mostradas a seguir são idênticas (bem, quase idênticas- :root tem uma especificidade maior que html):
- :root { background:#ff0; }
- html { background:#ff0; }
A pseudo classe :root é atualmente suportada por navegadores baseados em Mozilla e Safari.
A pseudo classe :nth-child()
A pseudo classe :nth-child() casa um elemento que tenha um certo
número de elemento irmão anteriores na árvore do documento. O argumento a
ser colocado dentro do parênteses, no seletor, pode ser um número, uma
palavra-chave (keyword) ou uma fórmula.
Um number n casa o enésimo filho. A regra a seguir aplica-se a todos os parágrafos que sejam o terceiro filho de seu elemento pai:
- p:nth-child(3) { color:#f00; }
As palavras-chave (keywords) odd e even
podem ser usadas para casar elementos filhos cuja posição índice seja
ímpar ou par. A posição índice do primeiro filho é 1. A regra a seguir
casa qualquer elemento p que seja o primeiro, terceiro, quinto, etc.
filho do seu elemento pai:
- p:nth-child(odd) { color:#f00; }
A regra a seguir casa qualquer elemento p que seja o segundo, quarto, sexto, etc. filho do seu elemento pai:
- p:nth-child(even) { color:#f00; }
A fórmula an + b pode ser usada para criar
repetições mais complexas. Na fórmula a representa o tamanho de um
ciclo, n é um contador que começa em 0 (zero) e b representa um valor a
ser somado para determinar a primeira interação. Todos os valores são
inteiros. Fica mais fácil entender como funciona este seletor quando
examinamos alguns exemplos. Então, vamos aos exemplos.
A regra a seguir casa qualquer elemento p cuja posição índice seja um
múltiplo de 3. Na primeira regra b é igual a (zero) é pode ser omitido,
como foi feito na segunda regra:
- p:nth-child(3n+0) { color:#f00; }
- p:nth-child(3n) { color:#f00; }
O valor a ser somado para determinar a primeira interação pode ser
usado para definir em qual filho a regra deve começar a ser aplicada. Se
você tem uma tabela com 20 linhas e deseja que cada linha ímpar a
partir da décima linha tenha uma cor de fundo diferente, você pode usar a
seguinte regra:
- tr:nth-child(2n+11) { background:#ff0; }
Uma vez que n começa em 0 (zero), o primeiro elemento tr a ser
casado é o 11º. O seguinte é o 13º., a seguir o 15º. e assim por diante.
E o suporte dos navegadores para estes utilíssimos seletores? Nada
bom. Tudo que eu sei é que nenhum navegador suporta este ou qualquer
outro seletor "nth". Por favor, corrija-me se eu estiver errado.
A pseudo classe :nth-last-child()
A pseudo classe :nth-last-child() funciona de maneira semelhante a
pseudo classe :nth-child() exceto pelo fato de que ela casa um elemento
que tenha um certo número de elemento irmão posteriores
na árvore do documento. Em outras palavras, a contagem inicia-se no
último filho e de trás para frente. A regra a seguir casa o penúltimo
(segundo de trás para frente) elemento tr de uma tabela:
- tr:nth-last-child(2) { background:#ff0; }
A pseudo classe :nth-last-child() não é suportada atualmente por qualquer navegador.
A pseudo classe :nth-of-type()
A pseudo classe :nth-of-type() funciona de maneira semelhante a
pseudo classe :nth-child(), mas somente leva em consideração elementos
do mesmo tipo do elemento ao qual a regra se aplica. A regra a seguir
casa qualquer elemento p que seja o terceiro filho do seu elemento pai:
- p:nth-of-type(3) { background:#ff0; }
Este seletor é útil quando você quer ter certeza que está casando o
terceiro elemento p. À primeira vista você poderá pensar que não há
diferença com o seletor nth-child, contudo :nth-child(3) considera
todos os elementos irmãos na sua contagem e assim sendo, o resultado
será diferente a menos que todos os elementos irmãos de p sejam também
elementos p.
A pseudo classe :nth-of-type() não é suportada atualmente por qualquer navegador.
A pseudo classe :nth-last-of-type()
A pseudo classe :nth-last-of-type() casa um elemento que tem um certo número de elementos irmãos do mesmo tipo após
na árvore do documento. Assim como a pseudo classe :nth-last-child() o
começo da contagem é a partir do último filho e a contagem faz-se de
trás para frente. A regra a seguir casa cada penúltimo elemento irmão do
tipo p:
- p:nth-last-of-type(2) { background:#ff0; }
A pseudo classe :nth-last-of-type() não é suportada atualmente por qualquer navegador.
A pseudo classe :last-child
A pseudo classe :last-child casa um elemento que é o último filho do seu elemento pai.
É o mesmo que :nth-last-child(1). A regra a seguir casa todos os elementos p que são o último filho do seu elemento pai:
- p:last-child { background:#ff0; }
A pseudo classe :last-child funciona em navegadores baseados em
Mozilla. Não é suportada pelo Ópera é apresenta bug no Safari (a regra
acima casa todos os elementos p contidos no documento).
Surpreendentemente funciona no navegador OmniWeb (testado na versão
5.1.1), ainda que este navegador seja baseado no Safari. Isto pode ter
sido causado por uma regressão na última versão do WebKit da Apple,
uma vez que OmniWeb é usualmente lançado como uma versão antiga do
WebKit que é usado pelo Safari.
A pseudo classe :first-of-type
A pseudo classe :first-of-type casa um elemento que é o primeiro irmão do seu tipo. É o mesmo que :nth-of-type(1).
- p:first-of-type { background:#ff0; }
A pseudo classe :first-of-type não é suportada atualmente por qualquer navegador.
A pseudo classe :last-of-type
A pseudo classe :last-of-type casa um elemento que é o último irmão do seu tipo. É o mesmo que :nth-last-of-type(1).
- p:last-of-type { background:#ff0; }
A pseudo classe :last-of-type não é suportada atualmente por qualquer navegador.
A pseudo classe :only-child
A pseudo classe :only-child casa um elemento que é filho único de
seu elemento pai. É o mesmo que (mas com um especificidade menor)
:first-child:last-child ou :nth-child(1):nth-last-child(1).
- p:only-child { background:#ff0; }
A pseudo classe :only-child funciona em navegadores baseados em
Mozilla. Safari interpreta este seletor de modo semelhante a
:first-child (No Safari a regra acima casa todos os elementos p contidos
no documento que sejam o primeiro filho de seu elemento pai).
A pseudo classe :only-of-type
A pseudo classe :only-of-type casa um elemento cujo elemento pai não
tenha outro filho do mesmo tipo. whose parent element has no other
children of the same element type. É o mesmo que (mas com um
especificidade menor) :first-of-type:last-of-type ou
:nth-of-type(1):nth-last-of-type(1).
- p:only-of-type { background:#ff0; }
A pseudo classe :only-of-type não é suportada atualmente por qualquer navegador.
A pseudo classe :empty
A pseudo classe :empty casa um elemento que não tenha filhos. Estão
incluidos nós de textos e assim sendo, nos elementos a seguir somente o
primeiro não tem filhos:
- <p></p>
- <p>Text</p>
- <p><em></em></p
A seguinte regra casa o primeiro elemento mostrado nos exemplos acima:
- p:empty { background:#ff0; }
A pseudo classe :empty é atualmente suportada por navegadores
baseados em Mozilla. Safari erroneamente aplica a regra para todos os
elementos do tipo do elemento a casar.
A pseudo classe negação
A pseudo classe negação, escreve-se :not(s), usa um elemento simples
como argumento. Casa todos os elementos que não sejam o elemento
definido pelo simples seletor. Por exemplo: a regra a seguir casa todos
os elementos que não sejam o elemento p:
- :not(p) { border:1px solid #ccc; }
A pseudo classe negação é atualmente suportada por navegadores baseados em Mozilla e Safari.
O pseudo-elemento ::selection
O pseudo-elemento ::selection casa com a parte de qualquer elemento E
que tenha sido selecionado ou destacado pelo usuário. Um possível uso
para este seletor poderia ser o controle da aparência de um texto que
tenha sido selecionado.
Algumas poucas propriedades CSS aplicam-se ao pseudo-elemento ::selection: color, background, cursor e outline.
A regra a seguir define a cor vermelha para uma seleção no docuemnto:
- ::selection { color:#f00; }
O pseudo-elemento ::selection funciona atualmente em navegadores
baseados em Safari. O comportamento do Safari para este seletor é
inconsistente e precisa de correções. Os navegadores baseados em
Mozilla suportam este seletor se for usado o prefixo -moz- assim:
::-moz-selection. O prefixo será eventualmente removido para uso no
Mozilla.
Elemento de combinação irmão em geral
O elemento de combinação irmão em geral consiste de dois seletores
simples separados por um sinal de "til" (~). Este seletor casa
ocorrências do segundo elemento seletor simples que sejam precedidos
pelo primeiro elemento seletor simples. Ambos os elementos devem ter o
mesmo elemento pai, mas o segundo elemento não precisa seguir-se
imediatamente após o primeiro. A regra a seguir casa elementos ul que
são precedidos por um elemento p e que tenham o mesmo elemento pai:
- p ~ ul { background:#ff0; }
O elemento de combinação irmão em geral é atualmente suportado pelo Ópera e por navegadores baseados em Mozilla.
Melhor suporte pelos navegadores
Alguns seletores CSS 3 são amplamente suportados.
Infelizmente alguns dos mais úteis seletores ou não são bem suportados
ou são suportados com limitações pelos navegadores atuais. Isto faz com
que muitos dos seletores descritos neste artigo sejam mais ou menos
inúteis para a web atual. Entretanto, não tenha medo de
experimentá-los. Você poderá ainda usar os seletores que são suportados para acresentar um realce extra para navegadores avançados.
Então, na sua opinião qual navegador deverá ser o primeiro a suportar a maioria ou mesmo todos os seletores CSS 3? Safari, Firefox, ou Opera? Ou talvez, até mesmo o Internet Explorer?
