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