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.
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.
Aqui eu seleciono apenas as LI que tem um P como filho
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.
: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.
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).
Podemos ainda combinar esta pseudo-classe com outros seletores. No exemplo abaixo selecionamos apenas citações em Alemão (de).
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:
Ou até mesmo escrevemos isso em linhas diferentes. Mas, com esta pseudo-classe podemos declarar tudo isso de uma vez:<
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:
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. 🙂
Significado
Tipo
Nível
um elemento E que não corresponde ao seletor composto s1 e s2
Negation pseudo-class
3/4
um elemento E que corresponde ao seletor composto s1 e / ou s2
Matches-any pseudo-class
4
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
um elemento do tipo E na direção de leitura da esquerda para a direita
The :dir() pseudo-class
4
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
um elemento E que atua como âncora fonte de um hyperlink
The hyperlink pseudo-class
4
um elemento E que atua como âncora fonte de um hyperlink no documento atual
The local link pseudo-class
4
um elemento E que atua como âncora fonte de um hyperlink no domínio atual
The local link pseudo-class
4
um elemento E dentro de uma referência contextual. Se a referência estiver vazia :scope corresponde a :root
The scope pseudo-class
4
um elemento E localizado no presente em um canvas de tempo dimensional
Time-dimensional Pseudo-classes
4
um elemento E :current que corresponde ao seletor s
Time-dimensional Pseudo-classes
4
um elemento E localizado no passado em um canvas de tempo dimensional
Time-dimensional Pseudo-classes
4
um elemento E localizado no futuro em um canvas de tempo dimensional
Time-dimensional Pseudo-classes
4
um elemento E que esta em um estado indeterminado (não corresponde a checked ou unchecked)
The indeterminate-value pseudo-class
4
um elemento da user interface E em seu estado padrão
The default option pseudo-class :default
3-UI/4
um elemento da user interface E dentro do seu alcance
The validity pseudo-classes
3-UI/4
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
um elemento de formulário E obrigatório
The optionality pseudo-classes
3-UI/4
um elemento de formulário E opcional
The optionality pseudo-classes
3-UI/4
um elemento da user interface E que pode ser apenas visualizado pelo usuário
The mutability pseudo-classes
3-UI/4
um elemento da user interface E que pode ser alterado pelo usuário
The mutability pseudo-classes
3-UI/4
um elemento E que corresponde ao n-th sibling do seletor
Structural pseudo-classes
4
um elemento E que corresponde ao n-th sibling do seletor, contado a partir da última correspondência
Structural pseudo-classes
4
um elemento E que representa uma célula em um grid/tabela pertencente a uma coluna correspondente ao seletor
Grid-Structural pseudo-classes
4
um elemento E que representa um célula pertencente a coluna de número nth em um grid/tabela
Grid-Structural pseudo-classes
4
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
um elemento F referenciado com ID através do atributo foo de um elemento E
Reference combinator
4
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: