Informática Numaboa - Tutoriais e Programação
Pequeno laboratório de CSS III
|
Ter 18 Abr 2006 18:56 |
- Detalhes
- Categoria: CSS - Cascanding Style Sheet
- Atualização: Domingo, 12 Abril 2009 11:03
- Autor: vovó Vicki
- Acessos: 12543
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
Pseudo-classes para Links
Os exemplos mais conhecidos de pseudo-classes são os do elemento a, usado nos links.
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| :link | Propriedades dos links não visitados. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #FF0000; } |
3 | 1 | 4 | 1 |
| :visited | Propriedades dos links visitados. | qualquer propriedade de texto (cor, peso, decoração). a:visited { color: #00FF00; } |
3 | 1 | 4 | 1 |
| :focus | Propriedades dos links ativados via teclado. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #00FF00; } |
3 | 1 | 4 | 1 |
| :hover | Propriedades dos links quando o cursor do mouse eatá sobre eles. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #FF00FF; } |
3 | 1 | 4 | 1 |
| :active | Propriedades do link ativo. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #0000FF; } |
3 | 1 | 4 | 1 |
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
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| :first-child | Propriedades de elementos que são os primeiros filhos de outro elemento. Pode ser usada para outros elementos além do parágrafo. | qualquer propriedade. | 6 | 1 | 6 | 1 |
| :first-line | Propriedades da primeira linha de um parágrafo. | qualquer propriedade. | 6 | 1 | 6 | 1 |
| :first-letter | Propriedades da primeira letra de um parágrafo. | qualquer propriedade. | 6 | 1 | 6 | 1 |
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:
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.
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| :before | Conteúdo colocado antes do elemento. | content | - | 1 | 6 | 2 |
| :after | Conteúdo colocado depois do elemento. | content | - | 1 | 6 | 2 |
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!
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">...