O que são pseudo-classes em CSS?

As pseudo-classes em CSS são palavras-chave adicionadas aos seletores para indicar um estado especial do elemento. Permitem aplicar estilos aos elementos com base na sua interação com o utilizador, na sua posição na estrutura do documento ou em outras características que não podem ser expressas por seletores padrão.

Exemplos de pseudo-classes:

• Estados do utilizador:

  • :hover - elemento sobre o qual o cursor do rato está colocado.
  • :active - elemento que está a ser ativado (por exemplo, um botão pressionado).
  • :focus - elemento que está em foco de entrada (por exemplo, um campo de texto).
  • :visited - link que o utilizador já visitou.
  • :link - link que o utilizador ainda não visitou.

• Posição na estrutura:

  • :first-child - primeiro filho do seu pai.
  • :last-child - último filho do seu pai.
  • :nth-child(n) - n-ésimo filho do seu pai.
  • :first-of-type - primeiro elemento do seu tipo entre os filhos.
  • :last-of-type - último elemento do seu tipo entre os filhos.

• Outros:

  • :empty - elemento sem filhos nem texto.
  • :not(selector) - elementos que não correspondem ao seletor indicado.

Sintaxe:

selector:pseudo-class {
  property: value;
}

Exemplo de uso:

/* Alterar a cor do texto ao passar o rato sobre um parágrafo */
p:hover {
  color: blue;
}

/* Estilo para o primeiro elemento de uma lista */
li:first-child {
  font-weight: bold;
}

As pseudo-classes expandem as capacidades dos seletores, permitindo criar interfaces mais dinâmicas e interativas sem usar JavaScript para mudanças simples de estilos.