CSS Pseudo-classi


Esempio

Le pseudo-classi sono parole chiave che consentono la selezione in base a informazioni che si trovano all'esterno dell'albero del documento o che non possono essere espresse da altri selettori o combinatori. Questa informazione può essere associato ad un certo stato ( stato e dinamiche pseudo-classi), a posizioni ( strutturali e indirizzare pseudo-classi), per negazioni della ex ( negazione pseudo-classe) o alle lingue ( Lang pseudo-classe). Gli esempi includono se un collegamento è stato seguito o meno ( :visited ), il mouse si trova su un elemento ( :hover ), una casella di controllo è selezionata ( :checked ), ecc.

Sintassi

selector:pseudo-class { 
    property: value;
}

Elenco di pseudo-classi:

Nome Descrizione
:active Si applica a qualsiasi elemento che viene attivato (cioè cliccato) dall'utente.
:any Ti permette di creare gruppi di selettori correlati creando gruppi che il
gli articoli inclusi corrisponderanno. Questa è un'alternativa alla ripetizione di un intero selettore.
:target Seleziona l'elemento #news attivo corrente (cliccato su un URL
contenente quel nome di ancoraggio)
:checked Si applica alla radio, alla casella di controllo o agli elementi delle opzioni che sono selezionati
o attivato in uno stato "on".
:default Rappresenta qualsiasi elemento dell'interfaccia utente che è l'impostazione predefinita tra un gruppo di
elementi simili.
:disabled Si applica a qualsiasi elemento dell'interfaccia utente che si trova in uno stato disabilitato.
:empty Si applica a qualsiasi elemento che non ha figli.
:enabled Si applica a qualsiasi elemento dell'interfaccia utente che si trova in uno stato abilitato.
:first Utilizzato insieme alla regola @page , seleziona la prima pagina di a
documento stampato
:first-child Rappresenta qualsiasi elemento che è il primo elemento figlio del suo genitore.
:first-of-type Si applica quando un elemento è il primo del tipo di elemento selezionato
all'interno del suo genitore. Questo può o non può essere il primo figlio.
:focus Si applica a qualsiasi elemento che ha l'attenzione dell'utente. Questo può essere dato dal
tastiera dell'utente, eventi del mouse o altre forme di input.
:focus-within Può essere usato per evidenziare un'intera sezione quando un elemento al suo interno è focalizzato. Corrisponde a qualsiasi elemento che corrisponde alle corrispondenze pseudo-classe: focus o che ha un focus focalizzato.
:full-screen Si applica a qualsiasi elemento visualizzato in modalità a schermo intero. Seleziona l'intero stack
di elementi e non solo l'elemento di livello superiore.
:hover Si applica a qualsiasi elemento al passaggio del mouse dal dispositivo di puntamento dell'utente, ma
non attivato.
:indeterminate Applica elementi dell'interfaccia utente radio o casella di controllo che non sono né controllati né
deselezionato, ma sono in uno stato indeterminato. Questo può essere dovuto a un
attributo dell'elemento o manipolazione DOM.
:in-range La :in-range pseudo-classe CSS :in-range corrisponde quando un elemento ha
il suo attributo value all'interno delle limitazioni di intervallo specificate per questo elemento.
Permette alla pagina di dare un feedback sul valore attualmente definito
l'utilizzo dell'elemento è all'interno dei limiti dell'intervallo.
:invalid Si applica a <input> elementi i cui valori non sono validi in base a
il tipo specificato nell'attributo type= .
:lang Si applica a qualsiasi elemento che include l'elemento <body> correttamente
lang= designato lang= attributo. Perché la pseudo-classe sia valida, deve
contenere un codice lingua valido di due o tre lettere.
:last-child Rappresenta qualsiasi elemento che è l'ultimo elemento figlio del suo genitore.
:last-of-type Si applica quando un elemento è l'ultimo del tipo di elemento selezionato all'interno
suo genitore. Questo può o non può essere l'ultimo figlio.
:left Utilizzato in congiunzione con la regola @page , seleziona tutto il sinistro
pagine in un documento stampato.
:link Si applica a tutti i collegamenti che non sono stati visitati dall'utente.
:not() Si applica a tutti gli elementi che non corrispondono al valore passato a
( :not(p) o :not(.class-name) per esempio. Deve avere un valore per essere
valido e può contenere solo un selettore. Tuttavia, puoi concatenare più elementi :not selettori insieme.
:nth-child Si applica quando un elemento è l' n -esimo elemento del suo genitore, dove n
può essere un numero intero, un'espressione matematica (ad es. n+3 ) o le parole chiave
odd o even .
:nth-of-type Si applica quando un elemento è l' n -esimo elemento del suo genitore di
stesso tipo di elemento, dove n può essere un numero intero, un matematico
espressione (ad esempio n+3 ), o le parole chiave odd o even .
:only-child La pseudo-classe CSS :only-child rappresenta qualsiasi elemento
che è l'unico figlio del suo genitore. Questo è lo stesso di
:first-child:last-child o :nth-child(1):nth-last-child(1) ,
ma con una specificità inferiore.
:optional La :optional pseudo-classe CSS :optional rappresenta qualsiasi elemento
su cui non è impostato l'attributo richiesto. Questo permette
forme per indicare facilmente campi opzionali e per modellarli di conseguenza.
:out-of-range La pseudo-classe CSS :out-of-range coincide quando un elemento ha la sua
attributo valore al di fuori dei limiti di intervallo specificati per questo elemento.
Permette alla pagina di dare un feedback sul valore attualmente definito usando il
l'elemento non rientra nei limiti dell'intervallo. Un valore può essere al di fuori di un intervallo, se lo è
o più piccoli o più grandi dei valori massimi e minimi.
:placeholder-shown Sperimentale. Si applica a qualsiasi elemento del modulo che attualmente visualizza testo segnaposto.
:read-only Si applica a qualsiasi elemento che non è modificabile dall'utente.
:read-write Si applica a qualsiasi elemento modificabile da un utente, come ad esempio <input> elementi.
:right Utilizzato insieme alla regola @page , seleziona tutte le pagine giuste in a
documento stampato
:root corrisponde all'elemento radice di un albero che rappresenta il documento.
:scope La pseudo-classe CSS corrisponde agli elementi che sono un riferimento
punto per selezionare i selettori contro.
:target Seleziona l'elemento #news attivo corrente (cliccato su un URL
contenente quel nome di ancoraggio)
:visited Si applica a tutti i collegamenti che sono stati visitati dall'utente.

Lo pseudoclass :visited non può più essere utilizzato per la maggior parte degli stili in molti browser moderni perché è un buco di sicurezza. Vedi questo link per riferimento.