Pseudo-classes

No formulário fictício de inscrição do Laboratório Belavista, o e-mail inválido ganha borda vermelha sem JavaScript. Pseudo-classes ligam estilo a estados.

O exemplo deste capítulo é 36-pseudo-classes, no pacote que acompanha o volume. Digite um e-mail sem @, preveja :invalid, confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Separar interação (:hover, :active, :focus-visible).
• Usar estados de formulário (:valid, :invalid, :required).
• Estruturais (:first-child, :nth-child).
• Negação e lógica (:not, :is, :where).
• Não depender só de :hover para informação.

Estado, não fatia

Pseudo-classe = o elemento inteiro num certo momento. Pseudo-elemento = parte ou filho gerado. Aqui ficamos no : simples.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pseudo-classes — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Inscrição na oficina</h1>
      <form action="#" method="get">
        <label for="email">E-mail</label>
        <input id="email" name="email" type="email" required>
        <button type="submit">Enviar</button>
      </form>
      <ul class="agenda">
        <li>Segunda — composição</li>
        <li>Quarta — tinta</li>
        <li>Sábado — impressão</li>
      </ul>
    </main>
  </body>
</html>

Interação

a:hover,
button:hover {
  text-decoration: underline;
}

button:active {
  transform: translateY(1px);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #8b1e1e;
  outline-offset: 2px;
}

:hover em mouse; em toque o comportamento varia. Informação essencial (preço, erro) não pode existir só no hover.

Formulário

input:required {
  border-inline-start: 3px solid #8b1e1e;
}

input:invalid:not(:placeholder-shown) {
  border-color: #a11;
}

input:valid {
  border-color: #2a6;
}

O formulário do volume é demonstrativo: não envia a servidor real nem grava dados pessoais.

Estrutura e :not

.agenda li:first-child {
  font-weight: 700;
}

.agenda li:nth-child(odd) {
  background: #f7f4ef;
}

.agenda li:not(:last-child) {
  border-block-end: 1px solid #ddd;
}

Erro comum: usar :first-child quando o primeiro filho real é outro tipo de nó (por exemplo um título antes do li). Confira a árvore no inspetor. Às vezes :first-of-type resolve melhor.

Critério para avançar

Você avança se: estiliza :invalid no e-mail; aplica :focus-visible no botão; explica a diferença para pseudo-elemento.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual pseudo-classe costuma marcar foco visível só no teclado (navegadores modernos)?
2. :hover basta para indicar que um botão é clicável em celular?
3. O que :not(:last-child) evita na lista .agenda?

Respostas comentadas

1. :focus-visible.
2. Não. Toque não tem hover confiável; combine tamanho, rótulo e foco.
3. Borda entre itens sem sobrar linha depois do último.