Visão geral

Aqui está uma descrição de cada pseudo-classe:

• :link– seleciona links não visitados.

• :visited– seleciona links visitados.

• :hover– o estado que acontece quando o usuário coloca o ponteiro do mouse em cima de um link.

• :active– o estado que acontece quando o usuário clica em um link.
  Este é o momento muito breve entre clicar no link e ficar focado, ou o momento entre clicar e ir para outra página da web. Como esse estado normalmente dura pouco tempo, você pode ver esse estado mais facilmente ao clicar e clicar com o mouse em um link sem soltar o botão do mouse.

• :focus– o estado que ocorre quando o usuário se concentra no link. Esse estado pode ser visto quando você guia para um link ou depois de clicar em um link.

Tecnicamente, das cinco pseudoclasses mais usadas para links, apenas duas — :linke :visited— são na verdade as pseudoclasses de link que são projetadas especificamente para elementos de link HTML (<a>).

As outras três — :hover, :activee :focus— são chamadas de pseudoclasses dinâmicas e podem ser usadas em outros elementos HTML.

Combinando pseudoclasses

Para maior especificidade CSS, você pode usar uma combinação de pseudoclasses. Por exemplo, você pode querer ter uma aparência diferente quando um usuário passa o mouse sobre um link visitado em vez de um link não visitado.

a:link { color: blue; } a:visited { color: purple; } a:link:hover { color: green; } a:visited:hover { color: red; }

No exemplo anterior, quando os usuários passam o mouse sobre um link não visitado, seu texto âncora fica verde. Mas se for um link visitado, o texto âncora ficará vermelho.

Ordem das pseudo-classes

Devido à especificidade do CSS, os links podem corresponder a várias pseudoclasses ao mesmo tempo.

Esta é a razão pela qual a ordem das regras de estilo em suas folhas de estilo é crucial. Um exemplo em que duas pseudoclasses são correspondidas ao mesmo tempo é quando um link é clicado. No início do evento de clique, o link corresponde brevemente aos dois estados :hovere :activeporque o ponteiro do mouse ainda está sobre o link enquanto o link está sendo ativado.

Sabemos que se dois seletores são iguais em especificidade, por padrão, o seletor mais abaixo na folha de estilo vence. Assim, se a :activeregra de estilo estiver acima da :hoverregra de estilo, os usuários nunca verão a :activeregra de estilo aplicada porque a :hoverregra de estilo a substitui. Para que todas as regras de estilo de pseudoclasse de link sejam renderizadas com sucesso, esta é a ordem sugerida:

a { } a:link { } a:visited { } a:hover { } a:focus { } a:active { }

Não diferencia maiúsculas de minúsculas

As especificações de pseudo-classe do W3C permitem qualquer tipo de estilo de revestimento.

Isso significa que escrever nomes de pseudoclasses em maiúsculas, minúsculas ou qualquer outro estilo de maiúsculas e minúsculas funcionará. No entanto, a prática recomendada predominante é escrever nomes de pseudoclasses em letras minúsculas. Todas essas :linkvariações de pseudoclasse funcionarão e são tecnicamente equivalentes entre si:

a:link { } a:LINK { } a:LiNk { } a:lInK { }

Espaçamento entre caracteres antes e depois de nomes de pseudoclasses

Não pode haver nenhum caractere de espaçamento antes e/ou depois dos dois pontos ( 🙂 antes do nome da pseudo-classe.

Por exemplo, escrever sua regra de estilo como tal não renderizará corretamente nos navegadores: /* Spaces before and after the colon (:) won’t work */ a : link { color: green; } /