A Aldeia Numaboa ancestral ainda está disponível para visitação. É a versão mais antiga da Aldeia que eu não quis simplesmente descartar depois de mais de 10 milhões de pageviews. Como diz a Sirley, nossa cozinheira e filósofa de plantão: "Misericórdia, ai que dó!"

Se você tiver curiosidade, o endereço é numaboa.net.br.

Leia mais...

Informática Numaboa - Tutoriais e Programação

Pequeno laboratório de CSS III

Ter

18

Abr

2006


18:56

(9 votos, média 4.33 de 5) 


Pseudo-classes

As pseudo-classes do CSS referem-se a determinados elementos do HTML. Os nomes das pseudo-classes são determinados pelo padrão CSS, ou seja, não é possível criar sub-classes com qualquer nome.

Sintaxe das pseudo-classes

seletor:pseudo-classe {propriedade: valor} ou seletor.classe:pseudo-classe {propriedade: valor}

Pseudo-classes para Links

Os exemplos mais conhecidos de pseudo-classes são os do elemento a, usado nos links.

PropriedadeDescriçãoValores IEFNW3C
:linkPropriedades dos links não visitados. qualquer propriedade de texto (cor, peso, decoração).
a:link { color: #FF0000; }
3141
:visitedPropriedades dos links visitados. qualquer propriedade de texto (cor, peso, decoração).
a:visited { color: #00FF00; }
3141
:focusPropriedades dos links ativados via teclado. qualquer propriedade de texto (cor, peso, decoração).
a:link { color: #00FF00; }
3141
:hoverPropriedades dos links quando o cursor do mouse eatá sobre eles. qualquer propriedade de texto (cor, peso, decoração).
a:link { color: #FF00FF; }
3141
:activePropriedades do link ativo. qualquer propriedade de texto (cor, peso, decoração).
a:link { color: #0000FF; }
3141
Info

Para funcionar corretamente, a pseudo-classe a:hover precisa ser definida DEPOIS de a:link e a:visited. Da mesma forma, a:active precisa ser definida DEPOIS de a:hover. :focus e :hover podem ser usados para outros elementos além de links, como por exemplo h2:hover { color: #00FF00; cursor: help; }. Teste o título abaixo:

Teste de Pseudo-classe

Nada impede usar pseudo-classes com classes. Por exemplo, a definição a.azul:visited { color: navy; } é perfeitamente válida. Cria-se a classe "azul" para "a" e define-se a cor da pseudo-classe ":visited" como azul escuro ("navy").

Pseudo-classes para Parágrafos

Para parágrafos existem as pseudo-classes :first-child, :first-line e :first-letter

PropriedadeDescriçãoValores IEFNW3C
:first-childPropriedades de elementos que são os primeiros filhos de outro elemento. Pode ser usada para outros elementos além do parágrafo. qualquer propriedade. 6161
:first-linePropriedades da primeira linha de um parágrafo. qualquer propriedade. 6161
:first-letterPropriedades da primeira letra de um parágrafo. qualquer propriedade. 6161

A folha de estilo abaixo diz para que a primeira linha dos parágrafos seja mostrada em negrito, que a primeira letra dos parágrafos seja vermelha e 300% maior que as outras, que as áreas "div" tenham cor de fundo #E0E0E0 e que seu primeiro parágrafo filho tenha cor de fundo #C0C0C0:

<style type="text/css"> p:first-line { font-weight:bold } p:first-letter { font-size:300%; color:red } div { background-color:#E0E0E0 } div p:first-child { background-color:#C0C0C0; } </style>

Esta é a primeira linha do parágrafo e, de acordo com a folha de estilo, deve aparecer em negrito. A primeira letra, também de acordo com a folha de estilo, deve ser 300% maior e aparecer em vermelho.

Este é o primeiro parágrafo dentro de um elemento div e a folha de estilo diz que o primeiro elemento filho deve ter a cor de fundo #C0C0C0. O parágrafo mantém o estilo da primeira linha e da primeira letra.

Este é o segundo parágrafo dentro do mesmo elemento div. Sua cor de fundo não é alterada e o que aparece é a cor de fundo do elemento div, #E0E0E0. O parágrafo mantém o estilo da primeira linha e da primeira letra.

Pseudo-classes para conteúdo dinâmico

Existem duas pseudo-classes que permitem inserir conteúdo dinâmico nas suas páginas. São :before e :after.

PropriedadeDescriçãoValores IEFNW3C
:beforeConteúdo colocado antes do elemento. content -162
:afterConteúdo colocado depois do elemento. content -162

A folha de estilo abaixo prepara três condições, mostradas nos exemplos. Recado para os que ainda usam o navegador Internet Explorer: não vai dar para testar os exemplos!

<style type="text/css"> h1:before { content:url(../../../src/info.gif)" "; } h2:before { content:"\2022"; } h2:hover:after { content:" #"attr(id); color:#888; font-size:70%; font-style:italic; } </style>

Observe abaixo o elemento <h1> normal e o gráfico adicionado dinamicamente antes do título conforme determinado na primeira especificação da folha de estilo:

Título normal

Título com gráfico adicionado dinamicamente

A segunda especificação da folha de estilo faz com que o "bullet", caracter gráfico de número 2022 do conjunto unicode seja colocado na frente do título. A terceira especificação faz com que o conteúdo do atributo "id" do título seja mostrado depois do mesmo quando o cursor do mouse estiver sobre ele. No exemplo abaixo, chamei o segundo título com <h2 id="Recadinho dinâmico">...

Título normal

Título com bullet adicionado dinamicamente

Informações adicionais