Pseudo-classe

Um estilo que só vale quando o elemento está em determinado estado, tipo hover ou foco.

Também aparece como ":hover", ":focus", ":disabled", "estados", "hover".

No mundo do Design

O Figma chama isso de While hovering

Pseudo-classe é o estado do componente escrito em CSS. Você já desenha esses estados no Figma, cada um num variant. No código eles ficam no mesmo lugar, com dois pontos na frente.

.botao:hover {
  background: #1a5fb8;
}
 
.botao:focus-visible {
  outline: 2px solid #1d6fd4;
  outline-offset: 3px;
}
 
.botao:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

As que você mais vai ver:

Pseudo-classe	Quando vale
`:hover`	mouse em cima
`:focus-visible`	elemento focado por teclado
`:active`	no instante do clique
`:disabled`	campo ou botão desativado
`:first-child`, `:last-child`	primeiro e último item da lista

O estado que quase todo handoff esquece

:focus-visible é o contorno que aparece pra quem navega de Tab. Sem ele a pessoa não enxerga onde está na página. Se o seu design system tem hover mas não tem foco, ele está incompleto, e esse é o buraco mais comum de acessibilidade que dá pra fechar em uma tarde.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.