Usando pseudo-classes
Pseudo-classes são palavras-chaves adicionadas depois do seletor CSS, de forma a especificar um estado especial do elemento selecionado. De forma geral, as pseudo-classes assumem a seguinte forma: element:pseudo-classe
.
As pseudo-classes mais comuns são:
- :hover: aplicada quando o mouse está em cima do elemento;
- :focus: aplicada quando um elemento recebe foco, o que pode ocorrer quando o usuário seleciona o elemento utilizando o teclado ou ativando o mesmo com o mouse. Geralmente usada para formulários;
- :root: representa o próprio documento HTML. É equivalente ao seletor usando o elemento
html
, mas root
é mais específico. É bastante usado para definir variáveis CSS;
- :first-child: representa qualquer elemento que seja o primeiro filho de seus pais. Usado para indicar o primeiro elemento de uma lista;
- :last-child: representa qualquer elemento que é o último filho de seu elemento pai. Pode ser usado para selecionar o último elemento de uma lista;
- :visited: indica links que já foram visitados pelo usuário.
Exemplos de aplicações podem ser vistos nas páginas: hover.html e links.html