Pseudo-classi

Podcast CSS - 015: pseudo-classi .

Supponiamo che tu abbia ricevuto un modulo di registrazione via email e vuoi che il campo del modulo dell'email abbia un bordo rosso se contiene un indirizzo email non valido. E come potete farlo? Puoi utilizzare una pseudo-classe CSS :invalid, che è una delle tante pseudo-classi fornite dal browser.

Una pseudo-classe consente di applicare stili in base a modifiche di stato e fattori esterni. Ciò significa che la struttura può reagire all'input dell'utente, ad esempio un indirizzo email non valido. Questi argomenti verranno trattati nel modulo Selettori. e questo modulo li illustrerà in modo più dettagliato.

A differenza degli pseudo-elementi, Per saperne di più, consulta il modulo precedente. Le pseudoclassi si agganciano a stati specifici in cui potrebbe trovarsi un elemento, piuttosto che definire lo stile generale delle parti di quell'elemento.

Stati interattivi

Le seguenti pseudo-classi vengono applicate a causa di un'interazione di un utente con la tua pagina.

:hover

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Origine

Se un utente dispone di un dispositivo di puntamento come mouse o trackpad, e lo posizionano sopra un elemento, puoi collegarti a quello stato :hover per applicare gli stili. Questo è un modo utile per suggerire la possibilità di interagire con un elemento.

:active

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Questo stato viene attivato quando è in corso un'interazione attiva con un elemento: ad esempio un clic, prima del rilascio del clic. Se viene utilizzato un dispositivo di puntamento, ad esempio un mouse, si verifica quando il clic inizia e non è stato ancora rilasciato.

:focus, :focus-within e :focus-visible

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Se un elemento può essere attivo, ad esempio <button>, puoi reagire a quello stato pseudo-classe :focus.

Puoi anche reagire se un elemento secondario del tuo elemento riceve lo stato attivo con :focus-within

Gli elementi attivabili, come i pulsanti, mostrano un anello di messa a fuoco quando sono a fuoco, anche quando ci si fa clic sopra. In questo tipo di situazione, lo sviluppatore applicherà il seguente CSS:

button:focus {
    outline: none;
}

Questo CSS rimuove l'anello di stato attivo predefinito del browser quando un elemento riceve lo stato attivo. che presenta un problema di accessibilità per gli utenti che navigano in una pagina web con una tastiera. Se non è presente uno stile di messa a fuoco, il cliente non sarà in grado di tenere traccia dell'attuale stato attivo quando viene usato il tasto Tab. Con :focus-visible puoi presentare uno stile di impostazione dello stato attivo quando un elemento viene attivato tramite tastiera, e al contempo usare la regola outline: none per impedire che si verifichi quando un dispositivo di puntatore interagisce con quest'ultimo.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Origine

La :target La pseudo-classe seleziona un elemento con id corrispondente a un frammento di URL. Supponiamo di avere il seguente codice HTML:

<article id="content">
    …
</article>

Puoi collegare stili a quell'elemento se l'URL contiene #content.

#content:target {
    background: yellow;
}

Questa funzionalità è utile per evidenziare le aree che potrebbero essere state collegate in modo specifico, come i contenuti principali su un sito web, tramite uno skip link.

Stati storici

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

La :link La pseudo-classe può essere applicata a qualsiasi elemento <a> con un valore href che non è stato ancora visitato.

:visited

Puoi definire un link che è già stato visitato dall'utente utilizzando lo :visited. È lo stato opposto di :link, ma hai meno proprietà CSS da utilizzare per motivi di sicurezza. Puoi modificare solo lo stile color, background-color, border-color, outline-color e il colore di SVG fill e stroke.

L'ordine è importante

Se definisci uno stile :visited, può essere sostituito da una pseudo-classe di link con almeno la stessa specificità. Per questo motivo, ti consigliamo di usare la regola LVHA per assegnare uno stile ai link con pseudo-classi in un determinato ordine: :link, :visited, :hover e :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

Stati modulo

Le seguenti pseudo-classi possono selezionare elementi del modulo, nei vari stati in cui questi elementi potrebbero trovarsi durante l'interazione con essi.

:disabled e :enabled

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origine

Se si tratta di un elemento del modulo, ad esempio <button> viene disattivato dal browser, puoi collegarti a quello stato pseudo-classe :disabled. La :enabled la pseudo-classe è disponibile per lo stato opposto, anche se gli elementi del modulo sono :enabled per impostazione predefinita, perciò potresti non raggiungere questa pseudo-classe.

:checked e :indeterminate

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origine

La :checked La pseudo-classe è disponibile quando un elemento modulo di supporto, ad esempio una casella di controllo o un pulsante di opzione sia in stato selezionato.

Lo stato :checked è binario(vero o falso), mentre le caselle di controllo hanno uno stato intermedio se non sono selezionate o deselezionate. Questo è noto come :indeterminate.

Un esempio di questo stato è quando è presente l'opzione "Seleziona tutto" controllo che seleziona tutte le caselle di controllo di un gruppo. Se l'utente vuole deselezionare una di queste caselle, la casella di controllo principale non rappresenterà più "tutti" viene controllato, quindi devono essere posti in uno stato indeterminato.

L'elemento <progress> ha anche uno stato indeterminato a cui può essere applicato uno stile. Un caso d'uso comune è quello di dargli un aspetto a strisce per indicare che non è noto quanto altro sia necessario.

:placeholder-shown

Supporto dei browser

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Origine

Se un campo del modulo ha un attributo placeholder e nessun valore, :placeholder-shown per collegare gli stili a quello stato. Non appena ci sono contenuti sul campo, che abbia un placeholder o meno, questo stato non sarà più valido.

Stati di convalida

Supporto dei browser

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Origine

Puoi rispondere alla convalida del modulo HTML con pseudo-classi come :valid, :invalid e :in-range Le pseudo-classi :valid e :invalid sono utili per i contesti ad esempio un campo email con pattern che deve essere abbinato, affinché sia un campo valido. Questo stato valido può essere mostrato all'utente aiutandoli a capire che possono passare in sicurezza al campo successivo.

La pseudo-classe :in-range è disponibile se un input ha min e max, come un input numerico e il valore rientri in questi limiti.

Con i moduli HTML, puoi stabilire che un campo è obbligatorio con l'attributo required. La :required pseudo-classe sarà disponibile per i campi obbligatori. I campi non obbligatori possono essere selezionati con :optional.

Selezionare gli elementi in base a indice, ordine e occorrenza

Esiste un gruppo di pseudo-classi che selezionano gli elementi in base alla loro posizione nel documento.

:first-child e :last-child

Supporto dei browser

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Origine

Se vuoi trovare il primo o l'ultimo elemento, puoi utilizzare :first-child e :last-child. Queste pseudo-classi restituiranno il primo o l'ultimo elemento di un gruppo di elementi di pari livello.

:only-child

Supporto dei browser

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Origine

Puoi anche selezionare elementi che non hanno elementi di pari livello, con :only-child.

:first-of-type e :last-of-type

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Origine

Puoi selezionare :first-of-type e :last-of-type che, all'inizio, fanno le stesse cose di :first-child e :last-child, ma considera questo codice HTML:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

E questo CSS:

.my-parent div:first-child {
    color: red;
}

Nessun elemento verrebbe di colore rosso perché il primo elemento secondario è un paragrafo e non un div. La pseudo-classe :first-of-type è utile in questo contesto.

.my-parent div:first-of-type {
    color: red;
}

Anche se il primo <div> è il secondo figlio, è ancora il primo di tipo all'interno dell'elemento .my-parent, pertanto con questa regola sarà di colore rosso.

:nth-child e :nth-of-type

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Origine

Non sei limitato al primo e all'ultimo elemento secondario e tipi. Le :nth-child e :nth-of-type Le pseudo-classi consentono di specificare un elemento che si trova in un determinato indice. L'indicizzazione nei selettori CSS inizia da 1.

In queste pseudo-classi puoi passare anche più di un indice. Se vuoi selezionare tutti gli elementi pari, puoi utilizzare :nth-child(even).

Puoi anche creare selettori più complessi che individuano elementi a intervalli regolari utilizzando la microsintassi An+B.

li:nth-child(3n+3) {
    background: yellow;
}

Questo selettore seleziona ogni terzo elemento a partire dall'elemento 3. n in questa espressione è l'indice, che inizia da zero per 3 (3n) è il valore per cui moltiplichi l'indice.

Supponiamo che tu abbia 7 elementi <li>. Il primo elemento selezionato è 3 perché 3n+3 si traduce in (3 * 0) + 3. La prossima iterazione selezionerà l'elemento 6 perché n è ora incrementato a 1, quindi (3 * 1) + 3). Questa espressione funziona sia per :nth-child sia per :nth-of-type.

Potete sperimentare questo tipo di selettore tester nth-child o questo strumento di selezione della quantità.

:only-of-type

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Origine

Infine, puoi trovare l'unico elemento di un certo tipo in un gruppo di fratelli e sorelle con :only-of-type Ciò è utile se vuoi selezionare elenchi contenenti un solo elemento, o per trovare l'unico elemento in grassetto in un paragrafo.

Ricerca di elementi vuoti in corso...

A volte può essere utile identificare elementi completamente vuoti, ed esiste anche una pseudo-classe per questo.

:empty

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origine

Se un elemento non ha elementi secondari, La pseudo-classe :empty viene applicata a questi elementi. I bambini non sono solo elementi HTML o nodi di testo: possono anche essere spazi vuoti, Ciò può creare confusione quando esegui il debug del seguente codice HTML e ti stai chiedendo perché non funziona con :empty:

<div>
</div>

Il motivo è che c'è uno spazio vuoto tra l'elemento <div> di apertura e quello di chiusura, non è una soluzione vuota.

La pseudo-classe :empty può essere utile se hai poco controllo sul codice HTML e vuoi nascondere elementi vuoti, ad esempio un editor di contenuti WYSIWYG. Qui, un editor ha aggiunto un paragrafo vuoto.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

Con :empty, puoi trovarlo e nasconderlo.

.post :empty {
    display: none;
}

Individuare ed escludere più elementi

Alcune pseudo-classi ti aiutano a scrivere CSS più compatti.

:is()

Supporto dei browser

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Origine

Se vuoi trovare tutti gli elementi secondari h2, li e img in un elemento .post, potresti pensare di scrivere un elenco di selettore come questo:

.post h2,
.post li,
.post img {
    …
}

Con :is() pseudo-classe, puoi scrivere una versione più compatta:

.post :is(h2, li, img) {
    …
}

La pseudo-classe :is non solo è più compatta di un elenco di selettore, ma è anche più tollerante. Nella maggior parte dei casi, se c'è un errore o un selettore non supportato nell'elenco, l'intero elenco dei selettori non funzionerà più. Se è presente un errore nei selettori passati in una pseudo-classe :is, il selettore non valido verrà ignorato, ma utilizzerà quelli validi.

:not()

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origine

Puoi anche escludere elementi con :not(). Ad esempio, puoi usarlo per definire tutti i link che non hanno un attributo class.

a:not([class]) {
    color: blue;
}

Una pseudo-classe :not può anche aiutarti a migliorare l'accessibilità. Ad esempio, <img> deve avere un valore alt, anche se è un valore vuoto, potresti scrivere una regola CSS che aggiunga un contorno rosso spesso alle immagini non valide:

img:not([alt]) {
    outline: 10px red;
}

Verifica le tue conoscenze

Verifica le tue conoscenze delle pseudo classi

Le pseudo-classi agiscono come se una classe fosse stata applicata dinamicamente a un elemento, mentre gli pseudo-elementi agiscono su un elemento stesso.

Vero
Cerca di utilizzare un : singolo o doppio come carattere distintivo della chiave nel selettore
Falso
Gli pseudo-elementi sono per le parti, mentre le pseudo-classi sono per lo stato.

Quali delle seguenti sono una pseudo-classe funzionale?

:is()
🎉
:target
Le pseudo-classi funzionali sono precedute da (), per indicare che accettano i parametri.
:empty
Le pseudo-classi funzionali sono precedute da (), per indicare che accettano i parametri.
:not()
🎉

Quali delle seguenti pseudo-classi sono dovute a un'interazione dell'utente?

:hover
🎉
:press
Riprova.
:squeeze
Riprova.
:target
🎉
:focus-within
🎉

Quali delle seguenti sono pseudo classi di stato <form>?

:enabled
🎉
:fresh
Riprova.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
Riprova.
:valid
🎉