Banner propaganda da DevMedia - Cursos de desenvolvimento web

Seletores CSS 2.1 - Parte 3

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

Autor: Roger Johansson
URL do original:http://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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

Traduzido em: 2005-10-24

topo