Pseudo-classes e Pseudo-elements CSS

Tempo de leitura: 3 minutos

Pseudo-classes e Pseudo-elements CSS: O CSS vai além de estilizar elementos estáticos. Para criar interfaces de usuário ricas e envolventes, é necessário que os elementos mudem de aparência em resposta às ações do usuário ou à sua posição no documento.

É aí que entram as Pseudo-Classes e os Pseudo-Elementos, um conjunto poderoso de seletores que permitem estilizar elementos com base em seu estado ou em partes específicas invisíveis do elemento.

Neste artigo, vamos desvendar essas construções e explorar como elas adicionam dinamismo e precisão ao seu CSS.

1. Pseudo-Classes (`:`) – Estilizando o Estado

As Pseudo-Classes representam um estado específico que um elemento pode ter. Elas são precedidas por um único ponto (:).

Pseudo-Classe	Sintaxe	Função	Exemplo de Uso
Interativas
`:hover`	`a:hover`	Quando o mouse está sobre o elemento.	Efeito visual ao passar o mouse.
`:focus`	`input:focus`	Quando o elemento está selecionado (tabulação ou clique).	Estilo de borda para campos de formulário.
`:active`	`button:active`	Quando o elemento está sendo ativado (segurando o clique).	Efeito de “apertar” um botão.
Estruturais
`:first-child`	`li:first-child`	O elemento que é o primeiro filho de seu pai.	Remover a margem do topo do primeiro item de uma lista.
`:last-child`	`p:last-child`	O elemento que é o último filho de seu pai.	Adicionar um estilo de rodapé ao último parágrafo.
`:nth-child(n)`	`li:nth-child(odd)`	Seleciona o n-ésimo filho (útil para listas zebradas).	Estilizar linhas ímpares/pares de tabelas ou listas.
Formulário
`:checked`	`input:checked`	Elementos (checkbox/radio) que estão marcados.	Estilizar caixas de seleção.
`:disabled`	`input:disabled`	Elementos de formulário desabilitados.	Mostrar campos inativos.

Combinando Pseudo-Classes

Você pode combinar várias pseudo-classes em um único seletor para alta precisão:

CSS

/* Estiliza o link que foi visitado E está com o mouse por cima */
a:visited:hover {
  opacity: 0.8;
}

2. Pseudo-Elementos (`::`) – Estilizando Partes

Os Pseudo-Elementos representam partes específicas de um elemento que não existem como tags no HTML. A sintaxe moderna usa dois pontos (::) para diferenciá-los de Pseudo-Classes.

Pseudo-Elemento	Sintaxe	Função	Exemplo de Uso
`::before`	`p::before`	Cria conteúdo antes do conteúdo real do elemento.	Adicionar ícones ou aspas decorativas.
`::after`	`p::after`	Cria conteúdo depois do conteúdo real do elemento.	Adicionar links de fonte ou limpar floats.
`::first-letter`	`p::first-letter`	Estiliza apenas a primeira letra de um bloco de texto.	Criar capitulares em artigos de revista.
`::first-line`	`p::first-line`	Estiliza apenas a primeira linha formatada de um bloco de texto.	Enfatizar a introdução de um parágrafo.

🛑 O Segredo de `::before` e `::after`

Para que os pseudo-elementos ::before e ::after funcionem, eles devem ter a propriedade content definida, mesmo que esteja vazia:

CSS

/* Adiciona um ponto final vermelho após o título principal */
h1::after {
  content: "."; /* ESSENCIAL: O que será inserido */
  color: red;
  font-weight: bold;
}

3. Especificidade e Boas Práticas

Pontuação de Especificidade: As Pseudo-Classes contam como um Seletor de Classe (0, 0, 1, 0). Os Pseudo-Elementos contam como um Seletor de Elemento (0, 0, 0, 1).
Acessibilidade: Garanta que os estilos :focus sejam sempre fortes e visíveis, permitindo que usuários que navegam por teclado saibam onde estão na página.
Conteúdo vs. Decoração: O conteúdo inserido por ::before e ::after não é indexado por mecanismos de busca e não é lido por leitores de tela; ele deve ser usado apenas para fins decorativos.

✅ Conclusão Pseudo-classes e Pseudo-elements CSS

Pseudo-Classes e Pseudo-Elementos são ferramentas que dão vida ao seu HTML estático. Ao estilizar o estado dos elementos (:hover, :checked) e manipular partes invisíveis (::before, ::after), você pode criar designs altamente interativos, acessíveis e visualmente ricos, sem a necessidade de adicionar elementos HTML extra.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: