Voltar para o site

Seletores CSS Nível 4

Publicado em: 03/01/2013

talita Essa matéria foi escrita pela designer de interface Talita Pagani. Entre em contato com Talita pelo seu site pessoal, pelo Facebook, pelo Twitter ou pelo LinkedIn

Conheça os novos seletores que estão previstos para a especificação do CSS

Desde Setembro de 2011, o W3C vem trabalhando no rascunho do módulo de Seletores Nível 4 (Selectors Level 4) para a especificação do CSS, o que não significa necessariamente que o CSS 4 está em progresso, pelo menos por enquanto. Este módulo trata de um novo conjunto de seletores, que podem ser incorporados tanto a uma nova versão do CSS quanto ao CSS 3. O CSS atualmente é tratado como um conjunto de especificações, modularizado em diferentes frentes de trabalho.

Os seletores deste novo módulo substituem ou estendem o conjunto de seletores definidos nas versões anteriores do CSS. Grande parte das novidades desta especificação são as novas pseudo-classes, que estão divididas nas seguintes categorias:

  • Localização
  • Ação do Usuário
  • Tempo Dimensional
  • Linguistica
  • Estado de elementos de interface
  • Estrutura de árvore do documento
  • Estrutura de grid

A seguir, uma visão geral de alguns destes novos seletores.

Pseudo-classes de Localização

Esta categoria se refere a pseudo-classes de hiperlink. No CSS 3, houve a inserção da pseudo-classe :target para referenciar um elemento-alvo de uma URI quando clicado na âncora. Agora, é possível aplicar estilos específicos a links internos com a pseudo-classe :local-link. A :local-link permite a aplicação de estilos a links baseada na localização do usuário dentro de um site e possibilita diferenciar links internos de externos. Exemplos: 

:local-link { ... }
  a:local-link { ... }
  nav :local-link { ... }

Opcionalmente, ela pode aceitar como argumento um número inteiro e não negativo que indica a profundidade dos segmentos da URL que ele irá considerar (porções da URL separadas por "/").

Pseudo-classes de Ações do Usuário

Na especificação atual (CSS 3), esta categoria engloba pseudo-classes como :hover, :active e :focus. Nos Seletores Nível 4, esta categoria contará com pseudo-classes para tratar drag and drop de elementos. Embora ainda haja um impasse com os nomes, serão definidas três pseudo-classes com as seguintes finalidades:

  • Uma pseudo-classe representando um elemento que é o drop target atual do item que está sendo arrastado (Possíveis nomes: :active-drop-target, :active-drop, :drop, :current-drop);
  • Uma pseudo-classe representando um elemento que é o drop target válido para um item que está sendo arrastado (Possíveis nomes: :valid-drop-target, :drop, :can-drop, :valid-drop);
  • Uma pseudo-classe representando um elemento que é um drop target, porém, não aceita o elemento que está sendo arrastado (Possíveis nomes: :invalid-drop-target, :no-drop, :invalid-drop).

Os drop targets são definidos através do atributo HTML dropzone.

Pseudo-classes de tempo dimensional

Estas pseudo-classes classificam elementos de acordo com a posição atualmente apresentada ou ativa dos elementos dentro de uma timeline de renderização. Por exemplo, identificam estados dos elementos durante o processamento de voz de um documento através de um software leitor de tela ou durante a exibição de um vídeo com WebVTT (Web Video Text Tracks) para renderizar as legendas.

A pseudo-classe :current representa um elemento (ou o ancentral mais próximo de um elemento) que está sendo lido/renderizado/exibido no momento atual.

No exemplo a seguir, será destacado qualquer parágrafo ou item de lista (ordenada, não ordenada ou de definição) que está sendo lido em voz alta por um sintetizador de voz: 

:current(p, li, dt, dd) {
        background: yellow;
  }

A pseudo-classe :past representa qualquer elemento que esteja definido para ocorrer totalmente antes de um elemento :current. Se não houver uma ordem "cronológica" para interpretação dos documentos, então a :past representa qualquer elemento que seja irmão (possivelmente indireto) anterior a um elemento :current.

A pseudo-classe :future representa qualquer elemento que esteja definido para ocorrer totalmente depois de um elemento :current. Se não houver uma ordem "cronológica" para interpretação dos documentos, então a :future representa qualquer elemento que seja irmão (possivelmente indireto) posterior a um elemento :current.

Pseudo-classe de Definição Linguistica

A nova pseudo-classe :dir() permite selecionar elementos baseados em sua direcionalidade (da esquerda para a direita - ltr; ou da direita para a esquerda - rtl). A direcionalidade é geralmente atribuída pelo atributo dir no HTML ou pela propriedade direction no CSS, mas os elementos que possuem direcionalidade definida pelo CSS não são afetados pela pseudo-classe :dir().

A diferença entre as sintaxes :dir(C) e [dir=C] no CSS é que [dir=C] irá capturar elementos que possuem explicitamente o atributo dir enquanto que :dir(C) irá selecionar todos os elementos que semanticamente possuem a direcionalidade especificada. Por exemplo, em uma <div dir="rtl">, todos os filhos desta div herdarão a direcionalidade rtl, mesmo sem o atributo dir especificado, e poderão ser capturadas pelo seletor :dir(rtl).

Pseudo-classes de Estado de Elementos de Interface

As pseudo-classes desta categoria têm relação com controles de formulário, em grande parte.

A pseudo-classe :indeterminate se aplica a elementos que possuem um estado indeterminado, por exemplo, um checkbox que pode não estar nem marcado nem desmarcado por algum motivo ou componentes de um grupo de radio buttons que não têm nenhum elemento pré-selecionado.

A pseudo-classe :default se aplica a um ou mais elementos que são opções padrões entre um conjunto de elementos similares. Isto se aplica tipicamente a conjuntos de botões e listas de seleção. Por exemplo, um botão padrão de submit dentro de um conjunto de botões em um formulário ou a opção padrão de um select.

As pseudo-classes :valid e :invalid podem ser usadas quando o conteúdo ou valor de um elemento é válido ou inválido, respectivamente, desde que o mesmo possua alguma validade semântica de dados. Um <input type="text"> possui validade semântica de dados, porém, neste caso não especifica nenhuma restrição ao valores que pode ter, portanto, será sempre :valid. Já um <p> não é um elemento que possui validade semântica para seu conteúdo, portanto, não será :valid nem :invalid.

As pseudo-classes :in-range e :out-of-range aplicam-se a elementos que possuem intervalos limitados de valores. Por exemplo, um slider que possui uma intervalo de valores de 1 a 10 mas possui valor 11 é considerado :out-of-range.

Para complementar a pseudo-classe :required, haverá também a pseudo-classe :optional para elementos de formulário que são opcionais (por padrão, qualquer elemento que não tenha o atributo required).

A pseudo-classe :user-error tem uma característica interessante: ela representa um elemento de formulário com input incorreto (:invalid, :out-of-range ou :required não preenchido) depois do usuário ter interagido significativamente com o elemento (ter submetido o formulário, por exemplo). Dessa forma, não é preciso fazer um tratamento específico para cada uma das pseudo-classes de validação mencionadas anteriormente.

Por fim, há as novas pseudo-classes :read-only e :read-write que podem ser aplicadas a qualquer elemento. Elementos de formulário, como inputs, usualmente serão considerados no estado :read-write (leitura e escrita). Os demais elementos de uma página são considerados :read-only (somente leitura) por padrão, a menos que tenham o atributo contenteditable definido como true.

A :default, :in-range, :out-of-range, :optional, :read-only e :read-write podem fazer parte da especificação do CSS3, mas ainda estão em fase experimental.

Pseudo-classes da Estrutura de Árvore do documento

As pseudo-classes :nth-match(n of selector) e :nth-last-match(n of selector) são semelhantes ao :nth-of-type e :nth-last-of-type, respectivamente, mas têm a intenção de possuir maior flexibilidade.

A :nth-match(n of selector) irá corresponder ao(s) n-ésimo (n) elemento(s) da lista de seletores especificados (selector). Por exemplo, na regra tr:nth-match(2n of .coluna) serão estilizadas as trs pares que possuem a classe .coluna. Teoricamente não deveria funcionar com as regras tr.coluna:nth-child(2n) e tr.coluna:nth-of-type(2n), mas os testes realizados com estes seletores funcionaram no Chrome 23, Firefox 16 e Internet Explorer 9. Possivelmente ela funcionará melhor do que o nth-child e o nth-of-type para seletores mais complexos e combinadores. A :nth-last-match irá selecionar o(s) último(s) n-ésimo(s) elemento(s) especificado(s) no seletor.

Pseudo-classes da Estrutura de grid do documento

As pseudo-classes desta categoria se refere principalmente a estruturas de tabelas, consideradas grids bidimensionais (para dados tabulares).

Para isto, há as pseudo-classes :nth-column e :nth-last-column que funcionam de forma análoga é :nth-child e :nth-last-child, respectivamente, mas com a restrição de funcionarem apenas para células de tabelas.

A :nth-column representa uma célula pertencente à n-ésima coluna especificada como parâmetro desta pseudo-classe. A :nth-last-column funciona de forma semelhante, porém, começando a contar a partir da última coluna.

Há também a pseudo-classe :column que representa uma célula pertencente a uma coluna representa por um elemento especificado por um seletor como parâmetro. Por exemplo, :column(col.subtotal) irá estilizar as células associadas a uma coluna (col) com a classe .subtotal.

Ainda há muito mais por vir...

Além das pseudo-classes, os Seletores Nível 4 contam também com novos combinadores e outros seletores interessantes. Apesar de ainda estar com diversas lacunas e incertezas quanto ao que, de fato, irá compor esta especificação, a proposta serve como um norteador do que o W3C pretende atingir com as próximas versões do CSS. Com isso, o CSS vem se tornando cada vez mais robusto e menos dependente de frameworks e bibliotecas externas.

Referências

Conheça os livros do Maujor®

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

topo