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
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
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
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
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
:link
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
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
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
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
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
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
Puoi anche selezionare elementi che non hanno elementi di pari livello,
con
:only-child
.
:first-of-type
e :last-of-type
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
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
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
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()
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()
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.
Quali delle seguenti sono una pseudo-classe funzionale?
:not()
:is()
:empty
:target
Quali delle seguenti pseudo-classi sono dovute a un'interazione dell'utente?
:focus-within
:press
:squeeze
:target
:hover
Quali delle seguenti sono pseudo classi di stato <form>
?
:enabled
:in-range
:loading
:checked
:indeterminate
:fresh
:valid