Carregando...

Pseudo-classes CSS

Você já domina seletores de tag, class, id e atributo. Falta uma camada: às vezes não quer o mesmo visual sempre; quer mudança quando o ponteiro está sobre o botão, quando alguém chega ao campo com Tab ou quando o link já foi aberto. Para isso existem pseudo-classes — sem class nova no HTML.

O que significa pseudo-classe?

Uma pseudo-classe é uma palavra colada ao seletor com dois-pontos simples (:). No HTML não aparece class="hover". O navegador ativa a regra quando a condição é verdadeira: ponteiro em cima, foco, histórico do link ou posição entre os filhos do pai.

Pseudo-classes comuns

Comece por estas. Há mais nomes, mas costumam bastar para começar na UI.

📊 Pseudo-classes CSS do dia a dia

Pseudo-classe Quando ativa Exemplo
:hover O ponteiro está sobre o elemento a:hover
:focus O elemento tem foco (teclado ou clique) input:focus
:visited O link já foi visitado (com limites de privacidade) a:visited
:first-child O elemento é o primeiro filho do pai li:first-child
:nth-child(n) O n-ésimo filho, ou ímpar/par tr:nth-child(odd)
:disabled O controle do formulário está desativado button:disabled

Hover — :hover

Com :hover a aparência muda enquanto o ponteiro está sobre o elemento. Botões e links parecem vivos com uma mudança pequena — não com um salto de layout.

Hover — feedback do botão

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Nota sobre hover

Mantenha a mudança suave. No toque quase não há hover real; não coloque informação essencial só dentro de :hover.

Foco — :focus

:focus pega o elemento ativo agora — por exemplo após Tab. Sem anel de foco visível, quem usa teclado se perde no formulário.

Foco — anel claro no input

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Hover e foco: os dois são necessários

Hover é para o ponteiro. Foco significa «este controle está ativo agora». Só remova outline com um substituto igualmente claro.

Links visitados — :visited

:visited colore links que o navegador acha que você já abriu. Em geral só a cor (e poucas propriedades). Não conte com mudar padding ou layout — a privacidade limita isso.

Visitado — cor suave do link

css
CSS Code 
a:visited {
color: #6b21a8;
}

Ordem dos estados do link

Se escrever vários estados juntos, uma ordem segura comum é: link → visited → hover → focus (às vezes LVHA). Assim hover e foco continuam visíveis também em links visitados.

Primeiro filho — :first-child

:first-child significa que o elemento é o primeiro filho do pai — não «o primeiro li da página inteira», e sim o primeiro entre irmãos sob esse pai.

Primeiro filho — destacar o primeiro item

css
CSS Code 
li:first-child {
font-weight: 700;
}

Próximo passo: :nth-child

Com :nth-child(odd) ou :nth-child(3) você faz listras ou «cada terceiro». Domine :first-child e depois esses padrões.

Bons hábitos

  • Pseudo-classe = dois-pontos simples (:hover); pseudo-elemento = duplos (::) — próxima sessão
  • Sempre combine hover interativo com :focus claro
  • Cores visited discretas
  • Teste também com Tab, não só com o mouse

Experimente você

  1. Página curta com <button>, <input>, alguns links e <ul> com três <li>.
  2. Adicione button:hover { background-color: #0f766e; color: #fff; } e passe o mouse no botão.
  3. Adicione input:focus { outline: 2px solid #0f766e; } e entre no campo com Tab.
  4. Adicione a:visited { color: #6b21a8; }, abra um link e volte.
  5. Adicione li:first-child { font-weight: 700; } — só o primeiro item fica negrito.

Erros comuns

  • Escrever ::hover em vez de :hover — o duplo é para pseudo-elementos
  • Estilizar hover e remover outline de foco sem substituto
  • Esperar liberdade total de :visited para qualquer propriedade
  • Achar que p:first-child significa «o primeiro parágrafo em qualquer lugar»
  • Colocar texto importante só em :hover para o usuário touch nunca ver

Resumo

  • Pseudo-classes escolhem por estado ou posição com dois-pontos simples
  • :hover e :focus dão feedback; mantenha os dois
  • :visited colore o link aberto nos limites do navegador
  • :first-child pega o primeiro filho; :nth-child é o próximo passo
  • Um dois-pontos = pseudo-classe; duplos = pseudo-elemento
  • Pratique com mouse, Tab e uma lista curta

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial