Tableless

Busca Menu

Seletores de CSS3 nível 4

Seja o primeiro a comentar por

Desde setembro de 2011 a W3C vem trabalhando nos seletores de CSS nível 4. Calma! Isso não significa que eles estão criando o CSS4, já que nem finalizaram o CSS3 ainda… Apenas que um novo pacote de pseudo-classes e classes que podem substituir as atuais, ou expandir o seu uso. Claro que, por ser algo recente, não são todos os browsers que dão suporte… Mas é bom tomar conhecimento. Afinal, é sempre bom estar um passo a frente do resto do mundo.

Como este conteúdo ainda está em discussão é bom sempre dar uma checada na documentação oficial da W3C de tempos e tempos para acompanhar o andamento do rascunho.

Vamos conhecer de perto alguns dos novos seletores de nível 4.

!E

Este super seletor determina qual será o elemento estilizado em relação ao seu elemento filho. Pode ser usado em qualquer lugar. Ele irá marcar exatamente qual elemento nós queremos selecionar.

div.menu !ul li.selecionada { … }

Nesta declaração estou estilizando apenas a UL que está dentro da div “menu” e possui uma LI de classe “selecionada”. Ou seja, caso exista outra UL dentro da DIV de classe “menu” que não possua a LI “.selecionada”, esta UL não será estilizada.

ul > !li > p { … }

Aqui eu seleciono apenas as LI que tem um P como filho

!div ul.submenu { … }

Agora estou selecionando apenas as DIVs que tem uma UL com a classe submenu.

Pseudo-Classe de Localização :local-link e :any-link

Estas pseudo-classes servem para identificar se os links são internos, ou seja, levam para o mesmo site, ou externos.

A pseudo-classe :any-link vai aplicar estilos a qualquer âncora do site, a:local-link seleciona os elementos que estão dentro do mesmo diretório e :local-link(0) vale para links dentro do mesmo host.
Uma forma de uso interessante é combinar os seletores, criando assim alvos mais complexos e precisos. É possível, por exemplo, juntar :any-link com a pseudo-classe :not() e criar um seletor apenas para links externos.

a:not(:local-link) {...}

:not()

Por falar na pseudo-classe :not, já presente em versões mais antigas do CSS3, a novidade é que agora ela pode receber mais de um seletor.

div :not(a, ul) { … }

No exemplo acima, ele seleciona todos os elementos da DIV, menos o e o

Pseudo-classe linguísticas

:lang

Este seletor nos permite estilizar apenas os elementos de uma determinada língua. No exemplo abaixo selecionamos apenas páginas html em português brasileiro (pt-br).

html:lang(pt-br)

Podemos ainda combinar esta pseudo-classe com outros seletores. No exemplo abaixo selecionamos apenas citações em Alemão (de).

:lang(de) > q

Obviamente é necessário, primeiramente, que a marcação de linguagem seja realizada no código html.

:dir()

Esta pseudo-classe identifica a direção de leitura do texto, normalmente aplicada pela classe dir no HTML ou direction no CSS.

Na pseudo classe :dir(rtl) iremos selecionar apenas os textos que estão com a sua leitura definida da direita para esquerda (rtl significa Right to Left) e podemos usar o :dir(ltr) para selecionar textos com a leitura da esquerda para direita.

Como estamos no ocidente e a maior parte dos textos (pra não dizer todos) são lidos da esquerda para a direita, acredito que isso pode ficar meio obscuro para nós. Mas, para o oriente ou países onde a leitura do texto se dá de maneira invertida parece ser uma pseudo-classe bem útil.

:matches()

Esta ótima pseudo-classe poupa muitas linhas de código. Ela seleciona vários elementos ao mesmo tempo. Por exemplo, podemos selecionar todos e dentro de uma mesma div.artigo.

Atualmente, nós fazemos assim:

div.artigo h1, div.artigo h2 { … }

Ou até mesmo escrevemos isso em linhas diferentes. Mas, com esta pseudo-classe podemos declarar tudo isso de uma vez:<

div.artigo :matches(h1, h2) { … }

Pronto! Selecionamos todas as H1 e H2 da div.artigo. Bem fácil e rápido.

Pseudo-classes de tempo dimensional

São pseudo-classes que selecionam o elemento presente, passado ou futuro em um canvas de tempo multidimensional. O que este conjunto de pseudo-classes faz é te deixar controlar o elemento ativo atualmente, o que acabou de ser ativado e o próximo a ser ativado em uma timeline de renderização. Isto pode ser útil no caso de um software de leitura de tela, por exemplo.

(E não, infelizmente isto não te da super-poderes para alterar o tempo e o espaço…)

A pseudo-classe :current seleciona o elemento que está sendo lido no momento. Por exemplo:

:current(p, li) { … }

No código acima, estamos selecionando o parágrafo ou a lista que está sendo lida atualmente.

Sabendo disso, temos também a pseudo-classe :past e a :future que selecionam elementos que vem antes e depois da pseudo-classe :current

Confira a tabela de seletores nível 4

Abaixo segue uma tabela completa com todos os seletores novos. A versão base deste artigo é a de 16 de janeiro de 2013.

Obs. 1 – Quando existirem mais de dois números para o item “nível” é por que não se trata de um novo seletor e sim de uma modificação estrututural de um seletor mais antigo.

Obs. 2 – “Foo” e “bar” são variável metasintáticas. Isto é um termo fresco pra dizer que não significam nada na realidade. Entenda por uma palavra qualquer a sua escolha que serve apenas de exemplo para o conteúdo real.

Obs. 3 – Substitua E por qualquer elemento da sua escolha. S, S1 e S2 por sua vez são os seletores que você deseja aplicar.

Obs. 4 – Não existe observação 4. 🙂

Padrão Significado Tipo Nível
E:not(s1, s2) um elemento E que não corresponde ao seletor composto s1 e s2 Negation pseudo-class 3/4
E:matches(s1, s2) um elemento E que corresponde ao seletor composto s1 e / ou s2 Matches-any pseudo-class 4
E[foo=”bar” i] um elemento E cujo valor do atributo foo é exatamente igual ao do atributo bar em qualquer variação ASCII. (case-insensitive). Attribute selectors: Case-sensitivity 4
E:dir(ltr) um elemento do tipo E na direção de leitura da esquerda para a direita The :dir() pseudo-class 4
E:lang(zh, *-hant) um elemento do tipo E marcado como chinês ou escrito com caracteres chineses (pode ser susbtituido por qualquer outra linguagem) The :lang() pseudo-class 2/4
E:any-link um elemento E que atua como âncora fonte de um hyperlink The hyperlink pseudo-class 4
E:local-link um elemento E que atua como âncora fonte de um hyperlink no documento atual The local link pseudo-class 4
E:local-link(0) um elemento E que atua como âncora fonte de um hyperlink no domínio atual The local link pseudo-class 4
E:scope um elemento E dentro de uma referência contextual. Se a referência estiver vazia :scope corresponde a :root The scope pseudo-class 4
E:current um elemento E localizado no presente em um canvas de tempo dimensional Time-dimensional Pseudo-classes 4
E:current(s) um elemento E :current que corresponde ao seletor s Time-dimensional Pseudo-classes 4
E:past um elemento E localizado no passado em um canvas de tempo dimensional Time-dimensional Pseudo-classes 4
E:future um elemento E localizado no futuro em um canvas de tempo dimensional Time-dimensional Pseudo-classes 4
E:indeterminate um elemento E que esta em um estado indeterminado (não corresponde a checked ou unchecked) The indeterminate-value pseudo-class 4
E:default um elemento da user interface E em seu estado padrão The default option pseudo-class :default 3-UI/4
E:in-range um elemento da user interface E dentro do seu alcance The validity pseudo-classes 3-UI/4
E:out-of-range um elemento da user interface E fora do seu alcance (como a letra Z em um menu com as escolhas A, B e C) The validity pseudo-classes 3-UI/4
E:required um elemento de formulário E obrigatório The optionality pseudo-classes 3-UI/4
E:optional um elemento de formulário E opcional The optionality pseudo-classes 3-UI/4
E:read-only um elemento da user interface E que pode ser apenas visualizado pelo usuário The mutability pseudo-classes 3-UI/4
E:read-write um elemento da user interface E que pode ser alterado pelo usuário The mutability pseudo-classes 3-UI/4
E:nth-match(n of selector) um elemento E que corresponde ao n-th sibling do seletor Structural pseudo-classes 4
E:nth-last-match(nof selector) um elemento E que corresponde ao n-th sibling do seletor, contado a partir da última correspondência Structural pseudo-classes 4
E:column(selector) um elemento E que representa uma célula em um grid/tabela pertencente a uma coluna correspondente ao seletor Grid-Structural pseudo-classes 4
E:nth-column(n) um elemento E que representa um célula pertencente a coluna de número nth em um grid/tabela Grid-Structural pseudo-classes 4
E:nth-last-column(n) um elemento E que representa uma céula pertencente a coluna de número nth em um grid/tabela, contando a partir da última correspondência Grid-Structural pseudo-classes 4
E /foo/ F um elemento F referenciado com ID através do atributo foo de um elemento E Reference combinator 4
E! > F um elemento E parent de um elemento F Determining the subject of a selector +Child combinator 4

Existe todo o futuro pela frente!

Vale lembrar que, embora tenha muita gente chamando isso de CSS4, estamos falando de CSS3. O que acontece é que o CSS3 está dividido em módulos, e este é o módulo nível 4.

Estes novos seletores de CSS3 ainda estão em fase inicial. Ou seja, ainda é um rascunho e muitas classes ainda não são suportadas pelos browsers atuais (se você quiser conferir quais já estão disponíveis para o seu navegador faça o teste aqui)… Eu particularmente já estou ansiosa para utilizar alguns destes elementos. Agora o que nos resta é torcer para os browsers implementarem suporte rapidamente para testarmos na prática a utilidade cada um. É claro que muita coisa ainda pode ser modificada, mas quem estiver se preparando desde agora certamente estará ajudando a sedimentar o conhecimento do futuro.

Saiba mais:
W3C
CSS4 Selectors

Publicado no dia