Definindo regras a partir de pseudoclasses

A definição da referência de uma pseudoclasse, contém primeiro a tag <a> (anchor) sem os sinais delimitadores "<>", seguida do sinal ":" e por último, a opção desejada para a formatação dos links da página. Observe abaixo, as opções mais utilizadas de pseudoclasses:

• A:link – Define a formatação para os links carregados e ainda não visitados

• A:visited – Define a formatação para os links já visitados

• A:active – Define a formatação para o link ativo

• A:hover – Define a formatação para o link imediatamente posicionado sob o cursor do mouse.

Suponhamos que você idealizou as seguintes regras de formatação para a apresentação dos links do seu site:

• Os links carregados e não visitados deverão ser exibidos com a cor azul, em negrito e sem o sublinhado.

• Os links já visitados deverão ser exibidos com a cor vermelha, em itálico e sem o sublinhado.

• O link sob o cursor do mouse deverá ser exibido com a cor amarela sobre o fundo verde, em negrito e sublinhado.

• O link ativo deverá ser exibido com a cor branca sobre o fundo vermelho, em negrito e sublinhado.

Observe a codificação das regras sugeridas no exemplo anterior:

a:link {
color: blue;
font-wheight: bold;
text-decoration: none; }
a:visited {
color: red;
font-style: italic;
text-decoration: none; }           
a:hover{
color: #ffff00;
background-color: #00ff00;
font-wheight: bold;
text-decoration: underline; }
a:active {
color: #ffffff;
background-color: #ff0000;
font-wheight: bold;
text-decoration: underline; }

a:active
{
color: #ffffff;
background-color: #ff0000;
font-wheight: bold;
text-decoration: underline;
}

Diferentemente do uso das classes, uma regra definida através de uma pseudo-classe não necessita de um atributo para a sua chamada, pois é automaticamente incorporada aos links por ser de uso específico para a formatação destes elementos.

O único cuidado que se deve ter é com relação a hierarquia dos elementos, pois caso um link possua alinhado internamente a sua própria formatação de fonte, esta será priorizada, sendo esta regra válida para todos os demais elementos HTML.