Pseudo-classi CSS

Le pseudo-classi selezionano elementi in base al loro stato o posizione.

Stati interattivi

a:hover { color: red; }      /* Mouse sopra */
a:active { color: darkred; } /* Click in corso */
a:visited { color: purple; } /* Link visitato */
input:focus { border-color: blue; } /* Elemento attivo */

Posizione nel DOM

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; } /* Dispari */
li:nth-child(even) { background: white; }  /* Pari */
li:nth-child(3n) { color: red; } /* Ogni 3 elementi */

Stato del form

input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
input:valid { border-color: green; }
input:invalid { border-color: red; }

Hai trovato utile quest'articolo?

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...
  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...
  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...
  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...
  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...