Tutorial Intermediário de CSS: Pseudo Classes

Pseudo classes são usadas juntos com seletores para especificar um estado do seletor. Elas aparecem na forma seletor:pseudo classe { propriedade: valor; }, com um sinal de dois-pontos separando o seletor e a pseudo classe.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

• link indica o estilo de links não-visitados.
• visited indica links que foram visitados.
• active indica um link que está com o foco (por exemplo, quando ele está sendo clicado).
• hover indica um link enquanto o cursor é mantido sobre ele.

a.homemdasneves:link {
	color: blue;
}

a.homemdasneves:visited {
	color: purple;
}

a.homemdasneves:active {
	color: red;
}

a.homemdasneves:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Experimente. Crie uma página HTML que use esses estilos. Veja quando cada pseudo classe é usada. Crie uma outra página HTML e um outro arquivo CSS e explore um pouco mais essas classes. Dominar esses estados te ajuda a fazer páginas bem mais legais.

Embora CSS te dê o poder de contornar isto, manter links visitados com cores diferentes de links não-visitados é uma boa prática, já que muitos usuários supõe que isso vai acontecer.

Tradicionalmente, links de texto são azuis se não visitados e violeta se visitados, e ainda existem razões para acreditar que essas cores são as mais eficazes para isso. No entanto, com a crescente popularização do uso do CSS, essas cores estão deixando de ser lugares-comum e o usuário médio não assume mais que links precisam ser azul ou violeta.

Você também devia estar apto a usar a pseudo classe hover com outros elementos além de links. Infelizmente, o Internet Explorer (sempre ele) não suporta esse recurso até a versão 6. Isso é uma tremenda irritação, porque existem um monte de truquezinhos legais que você pode fazer com isso que ficam ótimos em outros navegadores.

Páginas Relacionadas

• Próxima Página: Propriedades Atalho
• Página Anterior: Agrupando e Aninhando
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)
• Regras At (Em) – Pseudo classes em mídia paginada.

Exemplos

• Rollovers 1 – links gráficos que mudam quando o cursos passa por eles usando :hover.
• Rollovers 2 – Efeitos mais interativos, usando :active.

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.