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*/
