Intermedio12 min

Pseudo-classi e Pseudo-elementi

Selezionare stati interattivi e creare elementi decorativi senza modificare l'HTML.

Pseudo-classi e Pseudo-elementi

Le pseudo-classi selezionano elementi in base al loro stato o posizione. Gli pseudo-elementi creano contenuto decorativo senza toccare l'HTML.

Pseudo-classi interattive

css

.link {
  color: var(--primary);
}

.link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.link:active {
  transform: scale(0.98);
}

Pseudo-classi strutturali

Selezionano in base alla posizione nel DOM.

css

/* Primo e ultimo figlio */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }

/* Ogni riga alternata — effetto zebra */
tr:nth-child(even) {
  background-color: var(--muted);
}

/* Tutti tranne il primo */
.card:not(:first-child) {
  margin-top: 1rem;
}

Pseudo-elementi

::before e ::after creano elementi virtuali dentro il selettore.

css

.badge::before {
  content: "★";
  margin-right: 0.5rem;
  color: gold;
}

/* Linea decorativa sotto un titolo */
.titolo::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin-top: 0.5rem;
}

●Le pseudo-classi usano un singolo : — :hover, :focus
●Gli pseudo-elementi usano doppio :: — ::before, ::after
●::before e ::after richiedono sempre la proprietà content