search

css3-alt5.5.1 Pseudo-classes em CSS

As pseudo-classes são palavras-chave adicionadas aos seletores para aplicar estilos a estados específicos de um elemento, como quando o usuário passa o mouse, um link é visitado,

hashtag
🔹 1. Interação do Usuário

Afetam os estilos de elementos com base na interação do usuário, como mouse ou clique.

Pseudo-classe
Descrição
Exemplo

:hover

Quando o mouse está sobre o elemento

a:hover

:active

Quando o elemento está sendo clicado

button:active

:focus

Quando o elemento está em foco (input, etc)

input:focus

cssCopiarEditarbutton:hover {
  background-color: #0055ff;
  color: white;
}

hashtag
🔹 2. Posição em Listas

Permitem estilizar elementos com base na posição em uma lista ou grupo.

Pseudo-classe
Descrição
Exemplo

:first-child

Primeiro filho dentro do elemento pai

li:first-child

:last-child

Último filho dentro do elemento pai

li:last-child

:nth-child(n)

Seleciona o filho na posição n

li:nth-child(2)

:nth-of-type(n)

Seleciona o elemento do tipo na posição n

p:nth-of-type(3)

:only-child

Quando é o único filho

div:only-child

cssCopiarEditarul li:first-child {
  font-weight: bold;
}

hashtag
🔹 3. Estados de Formulários

Estilizam elementos com base em seu estado funcional.

Pseudo-classe
Descrição
Exemplo

:checked

Elemento marcado (checkbox/radio)

input:checked

:disabled

Elemento desativado

button:disabled

:enabled

Elemento habilitado

input:enabled

:required

Campo obrigatório

input:required

:optional

Campo não obrigatório

input:optional

:valid

Campo com valor válido

input:valid

:invalid

Campo com valor inválido

input:invalid

:placeholder-shown

Quando o placeholder está visível

input:placeholder-shown

hashtag
🔹 4. Pseudo-classes Avançadas

Permitem uma seleção mais precisa e contextual.

Pseudo-classe
Descrição
Exemplo

:not(selector)

Exclui elementos que correspondem ao seletor

p:not(.destaque)

:empty

Seleciona elementos sem filhos ou texto

div:empty

:root

Seleciona o elemento raiz (<html>)

:root

:is()

Agrupa múltiplos seletores para otimização

:is(h1, h2, h3)

:where()

Igual ao :is, mas com zero especificidade

:where(section, article)

:has()

(Novo) Seleciona elementos que contêm outros

div:has(img)

⚠️ :has() ainda tem suporte limitado em alguns navegadores. Teste antes de usar em produção.

Anterior5.4.2 CoresPróximo5.5.2 Pseudo-elementos & Seletores Avançados no CSS

Atualizado