Guia completo dos Seletores CSS3

Publicado em: 12/03/2014
visualizações

Introdução

O Módulo das CSS3 denominado "Selectors Level 3" atingiu, em 29 de setembro de 2011, o status de Recomendação do W3C. Essa Recomendação descreve os seletores já existentes nas CSS1 e CSS2 e cria novos seletores para as CSS3.

Seletores são "padrões" ou "modelos" que casam com os elementos de uma árvore do documento e portanto podem ser usados para selecionar os nós de um documento XML. Seletores foram otimizados para serem usados com as linguagens de marcação HTML e XML.

CSS (Cascading Style Sheets) é uma linguagem para descrever a renderização de documentos HTML e XML em uma tela, em papel, em sintetizadores de voz, etc.

As CSS usam seletores para atrelar propriedades de estilização aos elementos de um documento.

Tabela de seletores

Padrão Casa com Tipo CSS
* qualquer elemento Seletor universal 2
E elementos do tipo E Seletor tipo 1
E[foo] elementos com o atributo "foo" Seletor atributo 2
E[foo="bar"] elementos E cujo valor do atributo "foo" é exatamente igual a "bar" Seletor atributo 2
E[foo~="bar"] elementos E cujo valor do atributo "foo" é uma lista de valores separados por espaço, um dos quais é exatamente igual a "bar" Seletor atributo 2
E[foo^="bar"] elementos E cujo valor do atributo "foo" começa exatamente com a string "bar" Seletor atributo 3
E[foo$="bar"] elementos E cujo valor do atributo "foo" termina exatamente com a string"bar" Seletor atributo 3
E[foo*="bar"] elementos E cujo valor do atributo "foo" contém a substring "bar" Seletor atributo 3
E[foo|="en"] elementos E cujo atributo "foo" tem uma lista de valores começando com "en" e seguida por um hífen Seletor atributo 2
E:root elemento E raiz do documento Pseudo-classe estrutural 3
E:nth-child(n) elemento E que é o enésimo filho do seu elemento pai Pseudo-classe estrutural 3
E:nth-last-child(n) elemento E que é o enésimo filho (contado de trás para frente) do seu elemento pai Pseudo-classe estrutural 3
E:nth-of-type(n) elemento E que é o enésimo irmão do seu tipo Pseudo-classe estrutural 3
E:nth-last-of-type(n) elemento E que é o enésimo irmão (contado de trás para frente) do seu tipo Pseudo-classe estrutural 3
E:first-child elemento E que é o primeiro filho de seu elemento pai Pseudo-classe estrutural 2
E:last-child elemento E que é o último filho de seu elemento pai Pseudo-classe estrutural 3
E:first-of-type elemento E que é o primeiro irmão de seu tipo Pseudo-classe estrutural 3
E:last-of-type elemento E que é o último irmão de seu tipo Pseudo-classe estrutural 3
E:only-child elemento E que é o único filho de seu elemento pai Pseudo-classe estrutural 3
E:only-of-type elemento E que é irmão único do seu tipo Pseudo-classe estrutural 3
E:empty elemento E que não tem elementos filhos (inclusive nós de texto) Pseudo-classe estrutural 3
E:link
E:visited
elemento E que sendo destino de um link ainda não foi visitado (:link) ou que já tenha sido visitado (:visited) Pseudo-classe link 1
E:active
E:hover
E:focus
elemento E durante determinadas ações do usuário Pseudo-classe ação do usuário 1 e 2
E:target elemento E que é o destino de um fragmento identificador de um URI Pseudo-classe :target 3
E:lang(pt-br) elemento E em um determinado idioma - "exemplo: pt-br" Pseudo-classe :lang() 2
E:enabled
E:disabled
element