Seletores CSS3

Postado por em
maujor.com

Seletores CSS3

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.

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 elemento

Os 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 tipo

Sintaxe: 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 atributo

Sintaxe: E["foo"]

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

valor de um atributo

♦ Casa com elementos com determinado valor de atributo

Sintaxe: 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ço

Sintaxe: 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 string

Sintaxe: 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 string

Sintaxe: 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 documento

Sintaxe: :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 pai

Sintaxe: 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ção

Sintaxe: 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 tipo

Sintaxe: 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ção

Sintaxe: 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 pai

Sintaxe: 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 pai

Sintaxe: 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 tipo

Sintaxe: 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 tipo

Sintaxe: 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 pai

Sintaxe: E:only-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 tipo

Sintaxe: E:only-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 visitado

Sintaxe: a:link

Exemplo:

<a href="http://maujor.com">Site do Maujor<</a>
a:link {
  color: red; 
  text-decoration: none;  
}

link visitado

♦ Casa com o elemento que é um link que já foi visitado

Sintaxe: a:visited

Exemplo:

<a href="http://maujor.com">Site do Maujor<</a>
a:visited {
  color: orange; 
  text-decoration: underline;  
}

ativo

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

Sintaxe: a:active

Exemplo:

<a href="http://maujor.com">Site 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 ele

Sintaxe: a:hover

Exemplo:

<a href="http://maujor.com">Site 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 foco

Sintaxe: 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 link

Sintaxe: E:target

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

idioma

♦ Casa com o elemento que foi marcado em determinado idioma

Sintaxe: 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 desabilitado

Sintaxe: 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 marcado

Sintaxe: 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 elemento

Sintaxe:
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 elemento

Sintaxe:
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 elemento

Sintaxe: 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 elemento

Sintaxe: 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 seletor

Sintaxe: 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 classe

Sintaxe: 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 id

Sintaxe: E#foo

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor descendente

♦ Casa com o elemento que descende de determinado elemento

Sintaxe: E F

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

Seletor filho

♦ Casa com o elemento filho de determinado elemento

Sintaxe: 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 elemento

Sintaxe: 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 elemento

Sintaxe: E~F

Exemplo:

Ver no jsFiddle um exemplo interativo (abre em nova janela)

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.

Comentários

Postar um comentário