Pesquisar na Comunidade

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. Criei versões HTML, PNG e SVG desta tabela otimizadas para impressão. Que tal imprimir a tabela e tê-la na sua mesa de trabalho para uma referência e consulta rápida? — versão HTML para impressão desta tabela (link abre em nova janela) — versão PNG para impressão desta tabela (link abre em nova janela) — versão SVG com personalização de cores para impressão desta tabela (link abre em nova janela). Vamos estudar a seguir cada um dos seletores constantes da tabela. Incorporamos nesta página, para cada um dos seletores estudados, com uso de IFRAME para o JSFiddle, exemplos que demonstram o efeito de estilização. Você poderá complementar seus estudos clicando o link existente no canto superior direito do IFRAME e editando os códigos dos exemplos de modo interativo. Seletor universal ♦ Casa com qualquer elementoOs conteúdos de cada um dos elementos da marcação, ao serem renderizados em um navegador, são estilizados com regras CSS mínimas (por exemplo: cor e tipo de fonte, margens, paddings, etc.) que fazem parte de uma folha de estilos nativa do navegador e que na ordem de cascata tem a prioridade mais baixa, ou seja, qualquer declaração de estilo do autor ou usuário sobrescreve a folha de estilos nativa. Não existe uma padronização para essa folha de estilos e cada navegador implementa sua própria folha de estilos nativa. Como consequência ocorrem inconsistências de renderização, em relação a estilização básica, entre navegadores. Destas inconsistências a que produz maiores transtornos é a não padronização dos valores para as propriedades margin e padding. A principal utilização do seletor universal é “zerar” essas propriedades para todos os elementos da marcação. Como consequência o autor terá que definir explicitamente para cada elemento, na sua folha de estilos, aqueles valores. * { margin: 0; padding: 0; } O seletor universal quando declarado de forma contextual pode produzir resultados interessantes. Observe os exemplos a seguir: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor tipo ♦ Casa com elementos de um determinado tipoSintaxe: E Usado para estilizar os elementos da marcação que são de um mesmo tipo; por exemplo: elemento do tipo p(parágrafo), do tipo div, do tipo ol, do tipo strong, e assim por diante. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletores de atributo ♦ Casam com elementos cujo atributo satisfaçam determinadas condições presença de um atributo ♦ Casa com elementos que contenham um determinado atributoSintaxe: E["foo"] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo ♦ Casa com elementos com determinado valor de atributoSintaxe: E[foo=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo pertence a uma lista de valores separados por espaço ♦ Casa com elementos cujo valor de atributo pertença a uma lista de valores separados por espaçoSintaxe: E[foo~=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo começa com string ♦ Casa com elementos cujo valor de atributo começa com uma determinada stringSintaxe: E[foo^=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo termina com string ♦ Casa com elementos cujo valor de atributo termina com uma determinada stringSintaxe: E[foo$=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletores do tipo pseudo-classe elemento raiz ♦ Casa com o elemento raiz do documentoSintaxe: :root Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Nesse exemplo a cor dos elementos é herdada do elemento raiz. enésimo filho ♦ Casa com o elemento que é o enésimo filho do seu elemento paiSintaxe: E:nth-child(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo filho de trás para frente ♦ Casa com o elemento que é o enésimo filho do seu elemento pai, contado de trás para frente na marcaçãoSintaxe: E:nth-last-child(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo irmão do seu tipo ♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipoSintaxe: E:nth-of-type(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo irmão do seu tipo de trás para frente ♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipo, contado de trás para frente na marcaçãoSintaxe: E:nth-last-of-type(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeiro filho ♦ Casa com o elemento que é o primeiro filho do seu elemento paiSintaxe: E:first-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) último filho ♦ Casa com o elemento que é o último filho do seu elemento paiSintaxe: E:last-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeiro do mesmo tipo ♦ Casa com o elemento que é o primeiro irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:first-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) último do mesmo tipo ♦ Casa com o elemento que é o último irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:last-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) único filho ♦ Casa com o elemento que é o único filho do seu elemento paiSintaxe: E:eek:nly-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) único irmão ♦ Casa com o elemento que é o único irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:eek:nly-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) elemento vazio ♦ Casa com o elemento que não tem filhos (inclusive filhos do tipo nós de texto)Sintaxe: E:empty Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) link ♦ Casa com o elemento que é um link não visitadoSintaxe: a:link Exemplo: <a href="[Hidden Content] do Maujor<</a> a:link { color: red; text-decoration: none; } link visitado ♦ Casa com o elemento que é um link que já foi visitadoSintaxe: a:visited Exemplo: <a href="[Hidden Content] do Maujor<</a> a:visited { color: orange; text-decoration: underline; } ativo ♦ Casa com o elemento que por ação do usuário foi tornado ativoSintaxe: a:active Exemplo: <a href="[Hidden Content] do Maujor<</a> :active { outline: 1px solid pink; } sobre ♦ Casa com o elemento que, por ação do usuário, teve um dispositivo apontador colocado sobre eleSintaxe: a:hover Exemplo: <a href="[Hidden Content] do Maujor<</a> a:hover { color: green; background: black; } foco ♦ Casa com o elemento que por ação do usuário a ele foi dado o focoSintaxe: E:focus Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Não existe uma padronização relacionando os elementos HTML que podem receber foco. Mas, em geral são eles: Elemento a Elemento area com atributo href Elemento input Elemento select Elemento textarea Elemento button (não desabilitado) Elemento iframe Elemento a Qualquer elemento com o atributo tabindex alvo ♦ Casa com o elemento que é o alvo do fragmento identificador de um linkSintaxe: E:target Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) idioma ♦ Casa com o elemento que foi marcado em determinado idiomaSintaxe: E:lang Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) habilitado ou desabilitado ♦ Casa com o elemento da interface de usuário que seja habilitado ou desabilitadoSintaxe: E:enabled e E:disabled Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) marcado ♦ Casa com o elemento da interface de usuário que tenha sido marcadoSintaxe: E:checked Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeira linha ♦ Casa com a primeira linha do texto formatado de um elementoSintaxe: E:first-line — até as CSS2.1 E::first-line — modificada peals CSS3 As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Notas: 1 – Esse seletor aplica-se somente a elementos nível de bloco 2 – Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor propriedades para fontes propriedades para cores propriedades para background word-spacing letter-spacing text-decoration vertical-align text-transform text-shadow line-height clear primeira letra ♦ Casa com a primeira letra do texto formatado de um elementoSintaxe: E:first-letter — até as CSS2.1 E::first-letter — modificada pelas CSS3 As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Notas: 1 – Esse seletor aplica-se somente a elementos nível de bloco 2 – Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor propriedades para fontes propriedades para cores propriedades para background propriedades para margens propriedades para padding propriedades para bordas text-decoration vertical-align (para elementos não flutuados) text-transform text-shadow line-height float clear conteúdo antes ♦ Casa com o conteúdo gerado antes de um elementoSintaxe: E::before Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) conteúdo depois ♦ Casa com o conteúdo gerado depois de um elementoSintaxe: E:after Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) negação ♦ Casa com o elemento que não casa com determinado seletor simples seletorSintaxe: E:not(seletor) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor classe ♦ Casa com o elemento que tem determinado valor para o atributo classeSintaxe: E.foo Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor ID ♦ Casa com o elemento que tem determinado valor para o atributo idSintaxe: E#foo Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor descendente ♦ Casa com o elemento que descende de determinado elementoSintaxe: E F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor filho ♦ Casa com o elemento filho de determinado elementoSintaxe: E>F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor que imediatamente sucede ♦ Casa com o elemento irmão que imediatamente segue-se a determinado elementoSintaxe: E+F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor que sucede ♦ Casa com o elemento irmão que segue-se a determinado elementoSintaxe: E~F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) O IE outra vez! :( Os seletores CSS3 são suportados pelos navegadores modernos. Para servir os seletores das CSS3 aos navegadores Internet Explorer 6 até 8 use uma pequena biblioteca JavaScript (4K) chamada Selectivizr. Basta adicionar o seguinte código na seção head do documento: <script type="text/javascript" src="[JS library]"></script> <!--[if (gte IE 6)&(lte IE 8)]> [Hidden Content] <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> [spoiler=Fonte:] [Hidden Content]