Pseudo-classes

Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, :hover pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.

css
/*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre*/
button:hover {
  color: blue;
}

Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação (:visited, por exemplo), o status do seu conteúdo (como :checked em certos elementos de um formulário), ou a posição do mouse (como :hover, que permite saber se o mouse está sobre um elemento ou não).

Nota: Diferentemente das pseudo-classes, pseudo-elementos podem ser usados para estilizar uma parte específica de um elemento.

Sintaxe

seletor:pseudo-classe {
  propriedade: valor;
}

Assim como nas classes regulares, você pode encadear juntas quantas pseudo-classes você desejar em um seletor.

Índice de pseudo-classes padrão

Especificações

Specification
HTML Standard
# pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

Veja também