Manuale di riferimento dei pseudo-classe CSS

Pseudo-classe CSS

Le pseudo-classe vengono usate per definire lo stato speciale degli elementi.

Ad esempio, può essere usato per:

  • Impostare lo stile quando l'utente mette il mouse sopra l'elemento.
  • Impostare stili diversi per i link visitati e non visitati.
  • Impostare lo stile quando l'elemento ottiene il focus.
  • Impostare lo stile per gli elementi del modulo validi/invalidi/obbligatori/opzionali.

La tabella seguente mostra i diversi pseudo-classe nel CSS:

Pseudo-classe Esempio Descrizione dell'esempio
:active a:active Scegliere i link attivi.
:any-link a:anylink Scegliere tutti gli elementi <a> o <area> con l'attributo href.
:auto-fill input:autofill Scegliere tutti gli elementi <input> con valori automaticamente riempiti dal browser.
:checked option:checked Corrisponde a tutti gli elementi <input> o <option> selezionati.
:default input:default Scegliere l'elemento di modulo predefinito in un gruppo di elementi correlati.
:defined :defined Scegliere tutti gli elementi definiti (standard o personalizzati).
:dir() :dir(rtl) Scegliere gli elementi con direzione di testo specificata.
:disabled option:disabled Scegliere tutti gli elementi disabilitati, comunemente usati negli elementi del modulo.
:empty div:empty Scegliere tutti gli elementi senza elementi figli (inclusi i nodi di testo).
:enabled input:enabled Seleziona tutti gli elementi abilitati, spesso utilizzati negli elementi di modulo.
:first @page :first Rappresenta la prima pagina del documento da stampare (utilizzati insieme alle regole @page).
:first-child p:first-child Seleziona l'elemento che è il primo figlio dell'elemento genitore (in un gruppo di elementi fratelli).
:first-of-type li:first-of-type Seleziona il primo elemento di un tipo specifico in un gruppo di elementi fratelli.
:focus select:focus Seleziona l'elemento che ha ottenuto il fuoco, spesso utilizzato negli elementi di modulo.
:focus-visible button:focus-visible Seleziona l'elemento che ha ottenuto il fuoco (applicato solo quando il fuoco è stato applicato tramite tastiera e non tramite mouse).
:focus-within form:focus-within Corrisponde all'elemento o a qualsiasi discendente dell'elemento che ha ottenuto il fuoco.
:fullscreen :fullscreen Seleziona l'elemento che si trova attualmente in modalità a schermo intero.
:has() h2:has(+p) Seleziona l'elemento <h2> che segue immediatamente l'elemento <p> e applicare lo stile a <h2>.
:hover a:hover Seleziona l'elemento sul quale è stato posizionato il mouse.
:in-range input:in-range Seleziona l'elemento <input> con un valore nella gamma specificata.
:indeterminate input:indeterminate Seleziona gli elementi di modulo in stato incerto.
:invalid input:invalid Seleziona gli elementi di modulo non validi.
:is() :is(ul, ol) Seleziona tutti gli elementi <ul> e <ol>.
:lang() p:lang(it) Seleziona l'elemento <p> con l'attributo lang "it" (italiano).
:last-child li:last-child Seleziona l'elemento <li> che è l'ultimo figlio dell'elemento genitore.
:last-of-type p:last-of-type Seleziona l'elemento <p> che è l'ultimo figlio dell'elemento genitore.
:left @page :left Rappresenta tutte le pagine sinistre del documento da stampare (utilizzati insieme alle regole @page).
:link a:link Seleziona tutti i link non visitati.
:modal :modal Seleziona gli elementi in stato modale.
:not() :not(p) Seleziona tutti gli elementi che non sono <p>.
:nth-child() p:nth-child(2) Seleziona l'elemento <p> che è il secondo figlio dell'elemento genitore.
:nth-last-child() p:nth-last-child(2) Seleziona l'elemento <p> che è il secondo figlio più vecchio dell'elemento genitore.
:nth-last-of-type() p:nth-last-of-type(2) Seleziona l'elemento <p> che è il secondo figlio dell'elemento genitore.
:nth-of-type() p:nth-of-type(2) Seleziona l'elemento <p> che è il secondo <p> del suo elemento genitore.
:only-child p:only-child Seleziona l'elemento <p> che è l'unico figlio del suo elemento genitore.
:only-of-type p:only-of-type Seleziona l'elemento <p> che è l'unico <p> del suo elemento genitore.
:optional textarea:optional Seleziona gli elementi <input>, <select> o <textarea> senza attributo required.
:out-of-range input:out-of-range Seleziona l'elemento <input> con valore al di fuori dell'intervallo specificato.
:placeholder-shown input:placeholder-shown Seleziona l'elemento <input> o <textarea> che visualizza il testo del segnaposto corrente.
:popover-open :popover-open Seleziona l'elemento in stato di visualizzazione popup.
:read-only input:read-only Seleziona gli elementi di input con attributo readonly.
:read-write input:read-write Seleziona gli elementi di input editabili.
:required input:required Seleziona gli elementi di input con attributo required.
:right @page :right Rappresenta tutte le pagine di destra del documento stampato (utilizzato insieme alla regola @page).
:root :root Seleziona l'elemento radice del documento.
:scope :scope Seleziona l'elemento che rappresenta il punto di riferimento o l'intervallo per il selettore.
:state() :state() Seleziona l'elemento personalizzato con stato personalizzato specificato.
:target :target Seleziona l'elemento di destinazione attivo.
:user-invalid :user-invalid Seleziona gli elementi di modulo con valore non valido (dopo l'interazione dell'utente).
:user-valid :user-valid Seleziona gli elementi di modulo con valore valido (dopo l'interazione dell'utente).
:valid input:valid Seleziona tutti gli elementi di input con valore valido.
:visited a:visited Seleziona tutti i link visitati.
:where() :where(ol, ul) Seleziona tutti gli elementi <ul> e <ol>.