Pseudo-classi CSS

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

    Introduzione al CSS Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile...
  • Selettori Css di Base

    Selettori Css di Base I selettori CSS permettono di identificare gli elementi HTML a cui applicare g...
  • Proprietà color e background

    Proprietà color e background Le proprietà color e background sono fondamentali per definire l'aspett...
  • Margin e Padding

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

    Box Model CSS Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappres...