👻 Pseudo-classes e Pseudo-elementos

Pseudo-classes e pseudo-elementos são seletores especiais que permitem estilizar elementos com base em seu estado ou partes específicas deles.

1. Pseudo-classes (:)

Uma pseudo-classe seleciona um elemento com base em um estado específico, como quando o mouse está sobre ele ou quando um link já foi visitado.

:hover

Aplica estilos quando o cursor do mouse está sobre o elemento.

.botao:hover { background-color: #7c3aed; }

:focus

Aplica estilos quando um elemento está em foco (geralmente campos de formulário).

input:focus { border-color: #4f46e5; }

:first-child, :last-child, :nth-child()

Selecionam elementos com base em sua posição entre os irmãos.

/* Seleciona o primeiro item da lista */
li:first-child { color: blue; }

/* Seleciona o último item da lista */
li:last-child { color: red; }

/* Seleciona os itens ímpares da lista */
li:nth-child(odd) { background-color: #f0f0f0; }

2. Pseudo-elementos (::)

Um pseudo-elemento seleciona e estiliza uma parte específica de um elemento, como a primeira letra ou uma linha de texto, ou insere conteúdo antes ou depois do conteúdo real do elemento.

::before e ::after

Inserem conteúdo antes ou depois do conteúdo de um elemento. Requerem a propriedade content.

.item::before { content: "▶ "; }

::first-letter e ::first-line

Estilizam a primeira letra ou a primeira linha de um elemento de bloco.

p::first-letter { font-size: 2em; color: blue; }

Exemplo Combinado de Pseudo-elementos

Este parágrafo demonstra o uso de pseudo-elementos. O marcador no início é criado com `::before` e a primeira letra é estilizada com `::first-letter`. Tente selecionar este texto para ver o efeito de `::selection`.

::selection

Aplica estilos ao texto que o usuário seleciona (destaca) com o mouse.

::selection { background-color: #7c3aed; color: white; }

Selecione este texto para ver a mágica acontecer!