Pseudo-classi e pseudo-elementi

Le pseudo-classi selezionano stati o posizioni (:hover, :focus-visible, :nth-child). I pseudo-elementi creano contenuti o stili su porzioni (::before, ::after, ::selection).

:focus-visible migliora l'accessibilità rispetto a :focus generico per tastiera.

Esempio

button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.quote::before { content: "«"; }