Descreva as pseudo-classes e pseudo-elementos em CSS…

As pseudo-classes e pseudo-elementos expandem as capacidades dos seletores em CSS, permitindo aplicar estilos com base no estado, posição ou outras características dos elementos, que não podem ser expressas por seletores simples.

Pseudo-classes

As pseudo-classes começam com dois pontos (:). São usadas para estilizar um elemento em um estado específico.

Principais pseudo-classes:

:hover - estiliza o elemento ao passar o cursor sobre ele.
:active - estiliza o elemento durante o clique (ativação).
:focus - estiliza o elemento que atualmente tem o foco (por exemplo, após clicar num link ou num campo de entrada).
:visited - estiliza os links visitados.
:link - estiliza links não visitados.
:first-child - estiliza o primeiro filho do seu elemento pai.
:last-child - estiliza o último filho do seu elemento pai.
:nth-child(n) - estiliza o n-ésimo filho do seu elemento pai. n pode ser um número, uma palavra-chave (even, odd) ou uma expressão (2n+1).
:nth-last-child(n) - estiliza o n-ésimo filho a partir do final.
:not(selector) - estiliza os elementos que não correspondem ao seletor especificado.

/* Exemplo de uso de pseudo-classes */
a:hover {
  color: blue; /* Muda a cor do link ao passar o cursor */
}

input:focus {
  border-color: green; /* Muda a cor da borda do campo de entrada ao focar */
}

li:first-child {
  font-weight: bold; /* Estiliza o primeiro item da lista */
}

Pseudo-elementos

Os pseudo-elementos começam com dois pontos (::). São usados para estilizar uma parte específica do elemento ou para inserir conteúdo gerado antes ou depois do conteúdo do elemento.

Principais pseudo-elementos:

::before - insere conteúdo gerado antes do conteúdo do elemento. Geralmente usado com a propriedade content.
::after - insere conteúdo gerado após o conteúdo do elemento. Também requer a propriedade content.
::first-letter - estiliza a primeira letra do bloco de texto.
::first-line - estiliza a primeira linha do bloco de texto.
::selection - estiliza a parte do elemento que foi selecionada pelo usuário.

/* Exemplo de uso de pseudo-elementos */
p::first-letter {
  font-size: 2em; /* Aumenta a primeira letra do parágrafo */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Adiciona texto após o título */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Muda o fundo do texto selecionado */
  color: black;
}

Historicamente, as pseudo-classes usavam um único dois pontos (:) para compatibilidade com CSS2.1, enquanto os pseudo-elementos em CSS3 começaram a usar dois dois pontos (::) para uma melhor distinção. Recomenda-se usar dois dois pontos para pseudo-elementos no código moderno.

Tabela de comparação:

Característica	Pseudo-classe	Pseudo-elemento
Sintaxe	`:seletor`	`::seletor`
Propósito	Estado do elemento	Parte do elemento ou conteúdo gerado
Exemplos	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Descreva as pseudo-classes e pseudo-elementos em CSS.