Pseudo-classes

Una pseudo-classe CSS è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati. Ad esempio, :hover può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.

/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
button:hover {
  color: blue;
}

La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione (:visited, per esempio), lo stato del suo contenuto (come :checked su determinati elementi di form), oppure la posizione del mouse (come :hover), il quale permette di sapere se il mouse si trova su un elemento o no.

Nota: Al contrario delle pseudo-classi, gli pseudo-elementi possono essere usati per dare stile a parti specifiche di un elemento.

Sintassi

selector:pseudo-class {
  property: value;
}

Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.

Indice delle pseudo-classi standard

Specifiche

Specifica Status Commento
Fullscreen API Living Standard Definito :fullscreen.
HTML Living Standard Living Standard Definisce quando particolari selettori corrisponde ad elementi HTML.
Selectors Level 4 Working Draft Definiti :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() e :where().
Cambiato il comportamento di :empty :-moz-only-whitespace  .
Nessun cambiamento significativo per le altre pseudo-classi definite nel Selectors Level 3 e HTML5 (sebbene il significato semantico non sia stato preso in considerazione).
HTML5 Recommendation Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).
CSS Basic User Interface Module Level 3 Recommendation Definiti :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, ma senza l'associazione di significato semantico.
Selectors Level 3 Recommendation Definiti :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty e :not().
Definita la sintassi di :enabled, :disabled, :checked, e :indeterminate, ma senza l'associazione di significato semantico.
Nessun cambiamento significativo per le pseudo-classi definite nel CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) Recommendation Definiti :lang(), :first-child, :hover, e :focus.
Nessun cambiamento significativo per le pseudo-classi definite nel CSS Level 1.
CSS Level 1 Recommendation Definiti :link, :visited e :active, ma senza l'associazione di significato semantico.

Vedi anche