Seletores de Pseudoclasse: Estilizando estados e posições

Aprenda a aplicar estilos com base no estado de um elemento (ex: hover, active) ou sua posição (ex: first-child).

Você já sabe como selecionar elementos por tipo, classe, ID, atributos e até pela relação entre eles. Mas e se você quiser estilizar um elemento quando o usuário passa o mouse sobre ele? Ou quando um link já foi visitado? Ou talvez o primeiro item de uma lista?

É para isso que servem os Seletores de Pseudoclasse. Eles permitem que você selecione elementos com base em um estado específico (como hover para quando o mouse está em cima) ou em sua posição dentro de um grupo de elementos (como first-child para o primeiro filho).

Pense nas pseudoclasses como "condições especiais" que um elemento pode ter.

Como funcionam as Pseudoclasses

As pseudoclasses são indicadas por dois pontos (:) seguidos do nome da pseudoclasse. Elas são adicionadas a um seletor existente.

Sintaxe:

seletor:pseudoclasse {
  propriedade: valor;
}

Existem muitas pseudoclasses, mas vamos focar nas mais comuns e úteis:

Pseudoclasses de Estado do Usuário (Interatividade)

Estas pseudoclasses respondem à interação do usuário com o elemento.

  • :hover: Seleciona um elemento quando o cursor do mouse está sobre ele.
    • Exemplo: a:hover { color: orange; } (links ficam laranja ao passar o mouse)
  • :active: Seleciona um elemento enquanto ele está sendo ativado (clicado, pressionado).
    • Exemplo: button:active { background-color: darkblue; } (botão fica azul escuro enquanto clicado)
  • :focus: Seleciona um elemento quando ele está em foco (geralmente campos de formulário ou links que foram selecionados via teclado).
    • Exemplo: input:focus { border-color: blue; outline: none; } (campo de input ganha borda azul ao ser focado)
  • :visited: Seleciona links que o usuário já visitou.
    • Exemplo: a:visited { color: gray; } (links visitados ficam cinza)
  • :link: Seleciona links que ainda não foram visitados.
    • Exemplo: a:link { color: blue; } (links não visitados ficam azuis)

Ordem Importante para Links (L-V-H-A): Para que todas as pseudoclasses de link funcionem corretamente, elas devem ser declaradas na seguinte ordem no seu CSS: :link, :visited, :hover, :active. Lembre-se de "LoVe HAte" (Link, Visited, Hover, Active).

Pseudoclasses Estruturais (Posição na Árvore HTML)

Estas pseudoclasses selecionam elementos com base em sua posição dentro de um grupo de elementos irmãos.

  • :first-child: Seleciona o primeiro elemento de um grupo de irmãos.
    • Exemplo: li:first-child { font-weight: bold; } (o primeiro item de cada lista fica em negrito)
  • :last-child: Seleciona o último elemento de um grupo de irmãos.
    • Exemplo: li:last-child { border-bottom: none; } (o último item de cada lista não tem borda inferior)
  • :nth-child(n): Seleciona o enésimo (n-ésimo) elemento de um grupo de irmãos. n pode ser um número, uma palavra-chave (odd para ímpares, even para pares) ou uma fórmula (An+B).
    • Exemplo: li:nth-child(2) { color: green; } (o segundo item de cada lista fica verde)
    • Exemplo: li:nth-child(odd) { background-color: #f0f0f0; } (itens ímpares de cada lista têm fundo cinza claro)
    • Exemplo: li:nth-child(3n+1) { border-left: 5px solid blue; } (seleciona o 1º, 4º, 7º... item)
  • :first-of-type: Seleciona o primeiro elemento de seu tipo dentro de um grupo de irmãos.
    • Exemplo: p:first-of-type { text-transform: uppercase; } (o primeiro parágrafo dentro de seu pai fica em maiúsculas, ignorando outros elementos antes dele)
  • :last-of-type: Seleciona o último elemento de seu tipo dentro de um grupo de irmãos.
  • :nth-of-type(n): Seleciona o enésimo elemento de seu tipo dentro de um grupo de irmãos.

Diferença entre -child e -of-type:

  • -child conta todos os irmãos, independentemente do tipo.
  • -of-type conta apenas os irmãos do mesmo tipo.

Exemplo: HTML: <div><span>1</span><p>2</p><span>3</span><p>4</p></div>

  • span:first-child não seleciona nada, pois o primeiro filho do div é um span, mas span:first-child significa "o primeiro filho que é um span", e o primeiro filho é um span.
  • p:first-child não seleciona nada, pois o primeiro filho do div é um span, não um p.
  • p:first-of-type seleciona o <p>2</p>, pois é o primeiro parágrafo entre seus irmãos.

Outras Pseudoclasses Úteis

  • :not(seletor): Seleciona elementos que não correspondem ao seletor especificado.
    • Exemplo: p:not(.destaque) { color: gray; } (todos os parágrafos que não têm a classe destaque ficam cinza)
  • :empty: Seleciona elementos que não contêm nenhum filho (nem texto, nem outros elementos).
    • Exemplo: div:empty { height: 20px; background-color: lightgray; } (divs vazias recebem altura e fundo)
  • :checked: Seleciona elementos de formulário (checkbox, radio) que estão marcados.
    • Exemplo: input[type="checkbox"]:checked + label { font-weight: bold; } (o label adjacente a um checkbox marcado fica em negrito)
  • :disabled: Seleciona elementos de formulário que estão desabilitados.
    • Exemplo: input:disabled { background-color: #eee; cursor: not-allowed; } (inputs desabilitados têm fundo cinza e cursor de "proibido")
  • :enabled: Seleciona elementos de formulário que estão habilitados.

Combinando Pseudoclasses

Você pode combinar pseudoclasses com outros seletores e até mesmo com outras pseudoclasses para criar regras muito específicas.

Exemplo:

/* Seleciona o primeiro item de lista que está em foco */
li:first-child:focus {
  background-color: yellow;
}

/* Seleciona o terceiro parágrafo que não tem a classe 'aviso' */
p:nth-child(3):not(.aviso) {
  color: blue;
}

As pseudoclasses são ferramentas incrivelmente poderosas para adicionar interatividade e estilização baseada na estrutura do seu HTML, sem a necessidade de JavaScript. Elas permitem que você crie interfaces mais dinâmicas e responsivas à interação do usuário.