Pseudo-Classes CSS

Pseudo-Classes são utilizadas para empregar estilo a elementos em determinadas circunstâncias indicando um estado, por exemplo quando move-se o mouse sobre o elemento.

As pseudo-classes mais conhecidas são :link, :visited, :active e :hover, mas ainda existem a :focus, a :first-child e a :lang.

:link define o estilo para links que ainda não foram visitados pelo usuário:

a:link { color: #000; } /* define a cor preta para links que ainda não foram visitados */

:visited define estilo para links já visitados pelo usuário:

a:visited { color: #00F; } /* define a cor azul para links já visitados */

:active define estilo para um elemento quando este for ativado, por exemplo quando é clicado:

a:active { color: #F00; } /* define cor vermelha para o link durante o clique */

:hover define estilo para um elemento quando o move-se o mouse sobre ele:

a:hover { color: #0F0; } /* define cor verde para link quando o ponteiro do mouse está sobre ele */

:first-child define estilo para um elemento quando este for o primeiro de seu elemento pai:

a:first-child { color: #CCC; } /* define cor cinza para o primeiro link encontrado em algum outro elemento */

:focus define estilo para elemento quando este possuir foco no documento:

input:focus { background-color: #CCC; } /* define cor de fundo cinza para o input em foco */

:lang define estilo para elemento que possui o valor selecionado para o atributo lang:

span:lang(en) { font-weight: bold; } /* define o elemento span que possui o atributo lang com o valor "en" como negrito */

Não deve haver espaço entre os dois pontos e o restante do nome da pseudo-classe:

ERRADO - a: hover { ... }

CERTO - a:hover { ... }

Apesar de usarmos :hover para o elemento link ele não é restrito a esse elemento. Por exemplo, no exemplo abaixo ele é usado para as linhas de uma tabela:

tr:hover { color: #069; } /* define uma cor azul para a linha de uma tabela quando o ponteiro do mouse passar sobre*/