Guia completo dos Seletores CSS3

[Arkanun1000 3.056]

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.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

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:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

link visitado

♦ Casa com o elemento que é um link que já foi visitadoSintaxe: a:visited

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

ativo

♦ Casa com o elemento que por ação do usuário foi tornado ativoSintaxe: a:active

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

sobre

♦ Casa com o elemento que, por ação do usuário, teve um dispositivo apontador colocado sobre eleSintaxe: a:hover

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

a:hover {
color: green;
background: black;
}

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

[spoiler=Fonte:]

https://niltonfelipe.wordpress.com/2016/11/12/guia-completo-dos-seletores-css3/