Pseudo-classi

The CSS Podcast - 015: Pseudo-classi

Supponiamo che tu abbia un modulo di registrazione per email e che tu voglia che il campo del modulo email abbia un bordo rosso se contiene un indirizzo email non valido. E come potete farlo? Puoi utilizzare un':invalid pseudoclasse CSS, che è una delle molte pseudoclassi fornite dal browser.

Una pseudo-classe ti consente di applicare stili in base alle modifiche dello stato e a fattori esterni. Ciò significa che il tuo design può reagire all'input dell'utente, ad esempio un indirizzo email non valido. Questi argomenti sono trattati nel modulo Selettori, che li illustrerà in maggiore dettaglio.

A differenza degli pseudo-elementi, sui quali puoi saperne di più nel modulo precedente, le pseudo-classi si basano su stati specifici in cui un elemento potrebbe trovarsi, piuttosto che applicare stili in generale a parti dell'elemento.

Stati interattivi

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

:hover

Browser Support

• 1
• 12
• 1
• 2

Source

Se un utente ha un dispositivo di puntamento come un mouse o un trackpad e lo posiziona sopra un elemento, puoi collegarti a questo stato con :hover per applicare gli stili. Si tratta di un modo utile per indicare che è possibile interagire con un elemento.

:active

Browser Support

• 1
• 12
• 1
• 1

Source

Questo stato viene attivato quando si interagisce attivamente con un elemento, ad esempio un clic, prima che il clic venga rilasciato. Se viene utilizzato un dispositivo di puntamento come un mouse, questo stato si verifica quando il clic inizia e non è stato ancora rilasciato.

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

Browser Support

• 1
• 12
• 1
• 1

Source

Se un elemento può ricevere lo stato attivo, ad esempio un <button>, puoi reagire a questo stato con la pseudoclasse :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 attivazione quando sono attivi, anche quando viene fatto clic. In questo tipo di situazione, uno sviluppatore applicherà il seguente CSS:

button:focus {
    outline: none;
}

Questo CSS rimuove l'anello di attivazione predefinito del browser quando un elemento riceve l'attenzione, che presenta un problema di accessibilità per gli utenti che navigano in una pagina web con una tastiera. Se non è presente uno stile di stato attivo, non sarà possibile tenere traccia della posizione corrente dello stato attivo quando si utilizza il tasto Tab. Con :focus-visible puoi presentare uno stile di stato attivo quando un elemento lo riceve tramite la tastiera, utilizzando al contempo la regola outline: none per impedirlo quando un dispositivo di puntamento interagisce con l'elemento.

button:focus {
    outline: none;
}

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

:target

Browser Support

• 1
• 12
• 1
• 1.3

Source

L'pseudo-classe :target selezionata seleziona un elemento che ha un id corrispondente a un frammento di URL. Supponiamo che tu abbia il seguente codice HTML:

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

Puoi associare stili a questo elemento quando l'URL contiene #content.

#content:target {
    background: yellow;
}

Questo è utile per evidenziare aree a cui potrebbe essere stato fatto un link specifico, come i contenuti principali di un sito web, tramite un link di passaggio.

Stati storici

:link

Browser Support

• 1
• 12
• 1
• 1

Source

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

:visited

Puoi applicare uno stile a un link già visitato dall'utente utilizzando la pseudo-classe :visited. Si tratta dello stato opposto a :link, ma hai meno proprietà CSS da utilizzare per motivi di sicurezza. Puoi applicare stili solo a color, background-color, border-color, outline-color e al colore di fill e stroke SVG.

L'ordine è importante

Se definisci uno stile :visited, puoi sostituirlo con una pseudo-classe link con una specificità almeno uguale. Per questo motivo, è consigliabile utilizzare la regola LVHA per applicare stili ai link con pseudoclassi in un ordine specifico: :link, :visited, :hover, :active.

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

Nota: per motivi di sicurezza, puoi modificare solo gli stili definiti da uno stato :link o non visitato con la pseudoclasse :visited, quindi è importante assicurarti di definire prima gli stili modificabili. Attenersi alla regola LVHA ti aiuterà.

Stati del modulo

Le seguenti pseudoclassi possono selezionare gli elementi dei moduli nei vari stati in cui potrebbero trovarsi durante l'interazione con questi elementi.

:disabled e :enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

Se un elemento del modulo, come un <button>, è disabilitato dal browser, puoi collegarti a questo stato con la pseudo-classe :disabled. L'pseudo-classe :enabled è disponibile per lo stato opposto, anche se per impostazione predefinita gli elementi del modulo sono :enabled, pertanto potresti non utilizzare questa pseudo-classe.

:checked e :indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

L'pseudo-classe :checked è disponibile quando un elemento di modulo di supporto, come una casella di controllo o un pulsante di opzione, è selezionato.

Lo stato :checked è uno stato binario(true o false), ma le caselle di controllo hanno uno stato intermedio quando non sono selezionate o deselezionate. Questo è noto come stato :indeterminate.

Un esempio di questo stato è un controllo "Seleziona tutto" che seleziona tutte le caselle di controllo di un gruppo. Se l'utente deseleziona una di queste caselle di controllo, la casella di controllo principale non rappresenterà più la selezione di "tutti", pertanto deve essere impostata su uno stato indefinito.

L'elemento <progress> ha anche uno stato indefinito a cui è possibile applicare uno stile. Un caso d'uso comune è dare un aspetto a strisce per indicare che non è noto quanto altro è necessario.

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

Se un campo del modulo ha un attributo placeholder e nessun valore, la pseudoclasse :placeholder-shown può essere utilizzata per associare stili a questo stato. Non appena il campo contiene contenuti, indipendentemente dal fatto che sia presente o meno un placeholder, questo stato non verrà più applicato.

Stati di convalida

Browser Support

• 10
• 12
• 4
• 5

Source

Puoi rispondere alla convalida dei moduli HTML con pseudoclassi come :valid, :invalid e :in-range. Le pseudoclassi :valid e :invalid sono utili per contesti come un campo email che ha un pattern che deve essere abbinato per essere un campo valido. Questo stato del valore valido può essere mostrato all'utente, aiutandolo a capire che può 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 rientra in questi limiti.

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

Nota: non è una buona idea fare affidamento solo sul colore per indicare le modifiche dello stato, in particolare il rosso e il verde, perché gli utenti daltonici e con problemi di vista possono avere difficoltà a vedere una modifica dello stato o addirittura non notarla. Un'idea ingegnosa è utilizzare il colore per supportare le modifiche dello stato, insieme alle modifiche del testo e delle icone per indicare visivamente la modifica

Selezionare gli elementi in base all'indice, all'ordine e all'occorrenza

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

:first-child e :last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

Se vuoi trovare il primo o l'ultimo elemento, puoi utilizzare :first-child e :last-child. Queste pseudoclassi restituiscono il primo o l'ultimo elemento di un gruppo di elementi fratelli.

:only-child

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

Puoi anche selezionare gli elementi che non hanno elementi fratelli con la pseudo-classe :only-child.

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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Puoi selezionare :first-of-type e :last-of-type che a prima vista sembrano fare la stessa cosa 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 viene colorato di rosso perché il primo elemento secondario è un paragrafo e non un div. In questo contesto è utile la pseudo-classe :first-of-type.

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

Anche se il primo <div> è il secondo elemento secondario, è comunque il primo di tipo all'interno dell'elemento .my-parent, quindi con questa regola sarà colorato di rosso.

:nth-child e :nth-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Non sei limitato ai primi e agli ultimi elementi secondari e ai tipi. Le pseudoclassi :nth-child e :nth-of-type ti consentono di specificare un elemento che si trova in un determinato indice. L'indice nei selettori CSS inizia da 1.

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

Puoi anche creare selettori più complessi che trovano gli 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. Il n in questa espressione è l'indice, che inizia da zero. Il 3 (3n) è il numero per cui moltiplichi l'indice.

Supponiamo che tu abbia 7 articoli <li>. Il primo elemento selezionato è 3 perché 3n+3 si traduce in (3 * 0) + 3. L'iterazione successiva sceglierà 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.

Puoi provare questo tipo di selettore con questo tester figlio n-esimo o questo strumento di selezione della quantità.

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Infine, puoi trovare l'unico elemento di un determinato tipo in un gruppo di elementi fratelli con :only-of-type. Questa opzione è utile se vuoi selezionare elenchi con un solo elemento o se vuoi trovare l'unico elemento in grassetto in un paragrafo.

Trovare elementi vuoti

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

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

Se un elemento non ha elementi secondari, viene applicata la pseudo-classe :empty. Gli elementi secondari non sono solo elementi HTML o nodi di testo: possono anche essere spazi, il che può creare confusione quando esegui il debug del seguente codice HTML e ti chiedi perché non funziona con :empty:

<div>
</div>

Il motivo è che tra l'<div> di apertura e quello di chiusura è presente uno spazio vuoto, quindi il valore vuoto non funzionerà.

La pseudo-classe :empty può essere utile se hai poco controllo sull'HTML e vuoi nascondere elementi vuoti, come un editor di contenuti WYSIWYG. In questo caso, un editor ha aggiunto un paragrafo vuoto e fuori contesto.

<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;
}

Trovare ed escludere più elementi

Alcune pseudoclassi ti aiutano a scrivere CSS più compatti.

:is()

Browser Support

• 88
• 88
• 78
• 14

Source

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

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

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

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

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

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

Puoi anche escludere gli elementi con la pseudo-classe :not(). Ad esempio, puoi utilizzarlo per applicare uno stile a tutti i link che non hanno un attributo class.

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

Un'pseudoclasse :not può anche aiutarti a migliorare l'accessibilità. Ad esempio, un <img> deve avere un alt, anche se si tratta di un valore vuoto, quindi potresti scrivere una regola CSS che aggiunge un contorno rosso spesso alle immagini non valide:

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

Verificare di aver compreso

Metti alla prova le tue conoscenze sulle pseudo classi

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

Vero

Fai attenzione all'utilizzo di un : singolo o doppio come carattere distintivo principale nel selettore

Falso

Gli pseudo-elementi sono per le parti, le pseudo-classi sono per lo stato.

Quali delle seguenti sono pseudo-classi funzionali?

:is()

🎉

:target

Le pseudoclassi funzionali sono seguite da () per indicare che accettano parametri.

:empty

Le pseudoclassi funzionali sono seguite da () per indicare che accettano parametri.

:not()

🎉

Quali delle seguenti pseudo classi sono dovute a un'interazione 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

🎉