Seletores CSS3

Introdução

Nos meses de setembro e outubro de 2005 eu publiquei uma série de artigos explicando os seletores previstos nas CSS2.1. Em geral podemos afirmar que a maioria dos seletores descritos naqueles artigos podem ser usados atualmente nos navegadores mais modernos como Mozilla/Firefox, Safari, e Ópera. Temos que esperar ainda mais um pouco pelo Internet Explorer antes de podermos usar os seletores CSS2.1 em toda sua plenitude. A boa notícia é que o Internet Explorer versão 7 suportará ainda que em parte tais seletores.

Dando uma olhada adiante podemos constatar que existem seletores bem mais poderosos previstos nas CSS3 esperando para serem implementados e usados. Muitos dos seletores CSS3 já foram implementados e são suportados em navegadores modernos, mas em geral o suporte ainda é muito precário para que os desenvolvedores possam usar tais seletores. Contudo, há casos onde eles podem ser empregados para adicionar futuras melhorias em funcionalidades e assim sendo eu acredito que poderá ser útil dar uma olhada no funcionamento dos seletores CSS3.

Este artigo baseia-se nas especificações Selectors W3C Working Draft 15 December 2005 (NT: Rascunho de Trabalho do W3C para Seletores de 15 de dezembro de 2005) . Os novos seletores descritos naquele documento integram as CSSnível 3 mas, poderão ser usados também por outras linguagens. Se você estiver lendo este artigo meses ou mesmo anos depois da data da publicação daquele documento é uma boa idéia conferir se existe uma versão mais recente.

Eu não vou explicar neste artigo os fundamentos e o funcionamento dos seletores CSSem geral. Se você precisar fazer uma revisão dos conceitos e funcionamento dos seletores consulte Seletores CSS 2.1 - Parte 1.

Tabela de seletores

Para começar vamos a uma visão geral dos novos seletores CSS3:

Não se preocupe se 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 pseudoclasse :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 pseudoclasse :target possibilita casar aquele elemento. Se a URL não contém um fragmento identificador a pseudoclasse :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 é:
https://www.example.com/index.html#content-primary.

A pseudoclasse :target é atualmente suportada por navegadores baseados em Mozilla e Safari.

Pseudoclasse estado de elemento de UI

As pseudoclasses :enabled e :disabled

As pseudoclasses :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 pseudoclasse :checked

A pseudoclasse :checked permite aos desenvolvedores controlar a aparência dos elementos radio e elementos checkbox. Novamente, em navegadores que permitem estilizar formulários. A regra CSSa seguir define uma borda verde para os elementos radio e checkbox que estiverem marcados (checked):

input:checked { border:1px solid #090; }

A pseudoclasse 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.

Pseudoclasses estruturais

As pseudoclasses 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 pseudoclasses estruturais são poderosas mas, infelizmente os navegadores atuais suportam algumas poucas destas pseudoclasses.

A pseudoclasse :root

A pseudoclasse :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 pseudoclasse :root é atualmente suportada por navegadores baseados em Mozilla e Safari.

A pseudoclasse :nth-child()

A pseudoclasse :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.

Para maiores detalhes ver a seção :nth-child() pseudo-class das especificações para CSS3.

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 pseudoclasse :nth-last-child()

A pseudoclasse :nth-last-child() funciona de maneira semelhante a pseudoclasse :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 pseudoclasse :nth-last-child() não é suportada atualmente por qualquer navegador.

A pseudoclasse :nth-of-type()

A pseudoclasse :nth-of-type() funciona de maneira semelhante a pseudoclasse :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 pseudoclasse :nth-of-type() não é suportada atualmente por qualquer navegador.

A pseudoclasse :nth-last-of-type()

A pseudoclasse :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 pseudoclasse :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 pseudoclasse :nth-last-of-type() não é suportada atualmente por qualquer navegador.

A pseudoclasse :last-child

A pseudoclasse :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 pseudoclasse :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 pseudoclasse :first-of-type

A pseudoclasse :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 pseudoclasse :first-of-type não é suportada atualmente por qualquer navegador.

A pseudoclasse :last-of-type

A pseudoclasse :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 pseudoclasse :last-of-type não é suportada atualmente por qualquer navegador.

A pseudoclasse :only-child

A pseudoclasse :only-child casa um elemento que é filho único de seu elemento pai. É o mesmo que (mas com uma especificidade menor) :first-child:last-child e :nth-child(1):nth-last-child(1).

p:only-child { background:#ff0; }

A pseudoclasse :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 pseudoclasse :only-of-type

A pseudoclasse :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 uma 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 pseudoclasse :only-of-type não é suportada atualmente por qualquer navegador.

A pseudoclasse :empty

A pseudoclasse :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 pseudoclasse :empty é atualmente suportada por navegadores baseados em Mozilla. Safari erroneamente aplica a regra para todos os elementos do tipo do elemento a casar.

A pseudoclasse :not()

A pseudoclasse :not(), escreve-se :not(s), usa um elemento simples como argumento. Casa todos os elementos que não sejam o elemento definido pelo seletor simples s. Por exemplo: a regra a seguir casa todos os elementos que não sejam o elemento p:

:not(p) { border:1px solid #ccc; }

A pseudoclasse :not() é 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. São elas: 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- conforme a seguinte sintaxe: ::-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.

Queremos melhor suporte pelos navegadores

Alguns seletores CSS3 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 CSS3? Safari, Firefox, ou Opera? Ou talvez, até mesmo o Internet Explorer?

Compartilhe essa matéria com seus amigos