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
:active
:any-link
:blank
:checked
:current
:default
:defined
:dir()
:disabled
:drop
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:future
:focus
:focus-visible
:focus-within
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:not()
:nth-child()
:nth-col()
:nth-last-child()
:nth-last-col()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:state()
:target
:target-within
:user-invalid
:valid
:visited
:where()
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. |