Seletores CSS 2.1 - Parte 3

Publicado em: 10/10/2005
Atualizado em: 23/03/2011

Autor: Roger Johansson
URL do original:https://www.456bereastreet....selectors_part_3/
Título original: CSS2.1 selectors, Part 3
Traduzido com autorização expressa do autor

Esta é a terceira e última parte da série de três artigos sobre os seletores disponíveis em CSS 2.1. A Parte 1 trata dos conceitos básicos tais como; seletor tipo, seletores ID, seletores de classes, seletor universal e seletores simples. Na Parte 2 eu expliquei os elementos de combinação, seletores combinados, grupamento e seletores de atributo

Agora detalharei as pseudo-classes e os pseudo-elementos. Assim como os seletores mais avançados que eu apresentei na Parte 2, as pseudo-classes e os pseudo-elementos ainda não são plenamente suportados pela maioria dos navegadores, assim, não se esqueça de verificar o que irá acontecer se não houver suporte para um determinado seletor que você tenha usado. Você não quer que sua página seja inacessível por falta de suporte a uma CSS aqui descrita.

Pseudo-classes e pseudo-elementos

Pseudo-classes e pseudo-elementos podem ser usados para formatar elementos baseados em informações que estão disponíveis na árvore do documento. Por exemplo, não existe um elemento que marque a primeira linha de um parágrafo ou a primeira letra do texto contido em um elemento.

Pseudo-classes

Pseudo-classes casam elementos baseadas em características outras que não; seu nome, seus atributos ou seu conteúdo.

:first-child

Esta pseudo-classe casa com o elemento que é o primeiro filho de um outro elemento. Suponha que você quer estilizar diferenciadamente o primeiro parágrafo de um artigo. Se tal artigo estiver contido dentro de um elemento div ao qual foi atribuido a classe “article”, a regra a seguir casa com o primeiro elemento parágrafo p no artigo:

div.article p:first-child {
	font-style:italic;
}

Para casar com todos os elementos p que sejam filhos de qualquer elemento você poderia usar o seletor da regra a seguir:

p:first-child {
	font-style:italic;
}

:link e :visited

As pseudo-classes link afetam o estado dos links visitados e não visitados. Estes dois estados são mutuamente exclusivos – um link não pode ser visitado e não visitado ao mesmo tempo.

Estas pseudo-classes aplicam-se somente a hyperlinks e âncoras definidas na linguagem de marcação do documento. Em HTML, isto é válido para elementos com o atributo href. Uma vez que outros elementos não são afetados os seletores mostrados abaixo são equivalentes:

a:link
:link

:hover, :active, e :focus

As pseudo-classes dinâmicas podem ser usadas para controlar a apresentação de determinados elementos na dependência de ações do usuário.

:hover aplica-se para quando o usuário coloca um dispositivo apontador em um elemento mas não o ativa. O uso mais comum é quando da ação de usuário de apontar o cursor do mouse sobre o elemento.

:active aplica-se para quando o usuário ativa um elemento. Para ação de mouse, equivale a pressionar o botão e mantê-lo pressionado até soltar.

:focus aplica-se para quando um elemento recebe foco, ou seja, enquanto aceita eventos de teclado.

Um elemento pode ser casado a várias pseudo-classes ao mesmo tempo. Um elemento pode receber foco e ter o cursor do mouse sobre ele ao mesmo tempo, por exemplo:

input[type=text]:focus {
	color:#000;	
	background:#ffe;
}
input[type=text]:focus:hover {
	background:#fff;
}

A primeira regra casa com o elemento input e tem o foco, a segunda regra casa com o mesmo elemento quando tem o ponteiro do mouse sobre ele.

:lang

A pseudo-class para linguagem (idioma) pode ser usada para estilizar elementos cujo conteúdo está escrito em uma determinada linguagem (idioma - uma língua para humanos e não uma linguagem de marcação). A regra a seguir define que tipo de aspas usar para textos inline que estão escritos no idioma da Suécia:

q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

A linguagem para humanos (idioma) de um documento, normalmente é especificada pelo atributo lang em HTML e pelo atributo xml:lang em XHTML.

Pseudo-elementos

Os pseudo-elementos permitem acessar e formatar partes do documento que não estão disponíveis como nós da árvore do documento.

:first-line

O pseudo-elemento :first-line afeta a primeira linha de texto de um parágrafo. Aplica-se somente a elementos nível de bloco, blocos inline, table-caption ou table-cell.

O comprimento da primeira linha depende obviamente de uma série de fatores, ai incluido o tamanho da fonte e a largura do elemento container do texto.

A regra a seguir aplica-se à primeira linha do texto de um parágrafo:

p:first-line {
	font-weight:bold;
    color;#600;
}

Notar que existem algumas restrições quanto as propriedades aplicáveis no pseudo-elemento :first-line. Ver The :first-line pseudo-element para uma listagem das propriedades aplicáveis.

:first-letter

Este pseudo-elemento permite casar a primeira letra ou primeiro caractere de um elemento e aplica-se a elementos nível de bloco, list-item, table-cell, table-caption e bloco inline.

A regra a seguir aplica-se ao primeiro caractere de um elemento cuja classe denomina-se “preamble”:

.preamble:first-letter {
    font-size:1.5em;
    font-weight:bold;
}

Assim como para o pseudo-elemento :first-line o pseudo-elemento :first-letter tem suas restrições com relação as propriedades aplicáveis. Ver The :first-letter pseudo-element para uma listagem das propriedades aplicáveis.

:before e :after

Entre uma das mais discutidas funcionalidades das CSS os pseudo-elementos :before e :after podem ser usados para gerar conteúdos antes e depois do conteúdo de um elemento

A seguir uma exemplo de como :before pode ser usado (retirado do meu artigo Custom borders with advanced CSS):

.cbb:before {
    content:"";
    display:block;
    height:17px;
    width:18px;
    background:url(top.png) no-repeat 0 0;
    margin:0 0 0 -18px;
}

Um exemplo do uso de :after para inserir a URL logo após o texto de um link:

a:link:after {
    content: " (" attr(href) ") ";
}

Problemas com o Internet Explorer

Antes de colocar em uso tudo o que você aprendeu sobre seletores, tenha em mente que o Internet Explorer incluido versão 6 e anteriores dão um suporte incompleto para seletores CSS 2.1. Os seguintes seletores não são suportados:

• Child selectors (Seletores filho)
• Adjacent sibling selectors (Seletores irmãos adjacentes)
• Selectores de atributo
• Selectores com múltiplas classes
• Pseudo classe :first-child
• Pseudo classe language
• Pseudo-elementos :before e :after
• Pseudo classe :hover funciona somente para elementos a

Felizmente parece que o Internet Explorer 7 dará suporte completo para seletores CSS 2.1.

Você tem o poder– use-o corretamente

E, isto é tudo. Agora que você aprendeu seletores em CSS 2.1, você armou-se de uma poderosa ferramenta para estilizar seus documentos. Use-a com cuidado para manter sua marcação limpa, para incrementar a acessibilidade e a usabilidade. E lembre-se de pensar no que irá acontecer nos navegadores antigos que não dão suporte para os mais avançados seletores CSS.

« Voltar para Parte 2

Traduzido em: 2005-10-24