Le pseudo-classi in CSS sono molto utilizzate e consentono di attribuire dei particolari stili agli elementi in base ai loro stati specifici in cui si trovano. Ad esempio, prova a passare sopra con il mouse a questo pulsante:
Quando passi sopra con il mouse sul pulsante, il pulsante passa allo stato hover, che in italiano significa "passare il mouse". Lo stato hover può essere stilizzato in CSS grazie alla pseudo-classe :hover.
In questa lezione, vediamo le principali pseudo-classi in CSS.
Per utilizzare una pseudo-classe in CSS, esiste una sintassi di base:
elemento:pseudo-classe { ... }. Elemento è facoltativo.
Ad esempio, vediamo come usare la pseudo-classe :hover, che si attiva al passaggio del mouse:
button:hover {
background-color: blue;
}Esistono diverse tipologie di pseudo-classi presenti in CSS:
:first-of-type specifica il primo di una lista di elementi.:hover che si attiva al passaggio del mouse.:visited specifica i link che l'utente ha già visitato.:is() seleziona specifici tag.Vediamo quali sono le pseudo-classi per la struttura dell'HTML qui in tabella:
| Pseudo-classe | Descrizione |
:nth-of-type(n) | Seleziona l'elemento n-esimo del suo tipo tra gli elementi figli dell'elemento genitore. Ad esempio, :nth-of-type(2) seleziona il secondo elemento del tipo specificato. |
:nth-last-of-type(n) | Seleziona l'elemento n-esimo del suo tipo, contando dalla fine, tra i figli dell'elemento genitore. Ad esempio, :nth-last-of-type(1) seleziona l'ultimo elemento del tipo specificato. |
:nth-child(n) | Seleziona l'elemento n-esimo tra tutti gli elementi figli del genitore, indipendentemente dal tipo. Ad esempio, :nth-child(3) seleziona il terzo elemento figlio del genitore. |
:first-child | Seleziona il primo elemento figlio di un elemento genitore, indipendentemente dal suo tipo. |
:last-child | Seleziona l'ultimo elemento figlio di un elemento genitore, indipendentemente dal suo tipo. |
:first-of-type | Seleziona il primo elemento di un certo tipo tra gli elementi figli dell'elemento genitore. |
:last-of-type | Seleziona l'ultimo elemento di un certo tipo tra gli elementi figli dell'elemento genitore. |
:only-of-type | Seleziona un elemento se è l'unico del suo tipo tra gli elementi figli dell'elemento genitore. |
:empty | Seleziona un elemento vuoto, che non contiene elementi figli (tra cui anche testo o spazi). |
:target | Seleziona un elemento quando il suo id corrisponde alla parte di URL dopo il "#". |
Vediamone alcuni in dettaglio.
La pseudo-classe :nth-of-type() seleziona un elemento tra gli elementi figli dell'elemento genitore, contando dall'alto. Ad esempio, :nth-of-type(1) seleziona il primo elemento della lista di elementi, :nth-of-type(2) il secondo, e così via. Vediamo come evidenziare di verde il terzo elemento di una lista:
<ul>
<li>Elemento 1 della lista</li>
<li>Elemento 2 della lista</li>
<li>Elemento 3 della lista</li>
<li>Elemento 4 della lista</li>
</ul>
<style>
li:nth-of-type(3) {
background-color: lightgreen;
}
</style>La pseudo-classe :nth-last-of-type() funziona allo stesso modo di :nth-of-type(), ma non inizia a contare dal primo elemento, ma dall'ultimo.
<ul>
<li>Elemento 1 della lista</li>
<li>Elemento 2 della lista</li>
<li>Elemento 3 della lista</li>
<li>Elemento 4 della lista</li>
</ul>
<style>
li:nth-last-of-type(2) {
background-color: yellow;
}
</style>La pseudo-classe :nth-child() seleziona un elemento figlio di un elemento genitore, in base al numero indicato, contando dall'alto. A differenza di :nth-of-type(), che conta solo il tipo di elemento indicato (ad esempio, li:nth-of-type(3) seleziona il terzo <li>, ma sopra devono esserci altri due <li>), :nth-child() conta qualsiasi elemento (ad esempio, li:nth-child(3) seleziona il terzo elemento figlio, che deve essere un <li>).
Ad esempio, possiamo selezionare il terzo elemento figlio (qualsiasi sia) all'interno del <div>:
<div>
<h1>Elemento 1 del div</h1>
<p>Elemento 2 del div</p>
<h3>Elemento 3 del div</h3> <!-- Elemento colorato di blu -->
<a href="#0">Elemento 4 del div</a>
</div>
<style>
div > :nth-child(3) {
background-color: lightblue;
}
</style>Nell'esempio usiamo un selettore combinato (div > :nth-child(3)), che vedremo nella lezione dei selettori combinati, che indica tutti gli elementi all'interno del <div>.
La pseudo-classe :first-child seleziona il primo elemento figlio di un elemento genitore, indipendentemente dal suo tipo.
<ul>
<li>Elemento 1 della lista</li>
<li>Elemento 2 della lista</li>
<li>Elemento 3 della lista</li>
</ul>
<style>
li:first-child {
background-color: lightblue;
}
</style>La pseudo-classe :last-child seleziona l'ultimo degli elementi figlio di un elemento genitore, indipendentemente dal suo tipo.
<ul>
<li>Elemento 1 della lista</li>
<li>Elemento 2 della lista</li>
<li>Elemento 3 della lista</li> <!-- Elemento colorato -->
</ul>
<style>
li:last-child {
background-color: lightblue;
}
</style>La pseudo-classe :first-of-type seleziona il primo elemento di un certo tipo tra gli elementi figli dell'elemento genitore; la pseudo-classe :last-of-type seleziona l'ultimo elemento di un certo tipo tra gli elementi figli dell'elemento genitore.
<ul>
<li>Elemento 1 della lista</li> <!-- Elemento colorato di blue -->
<li>Elemento 2 della lista</li>
<li>Elemento 3 della lista</li>
<li>Elemento 4 della lista</li> <!-- Elemento colorato di verde -->
</ul>
<style>
li:first-of-type {
background-color: lightblue;
}
li:last-of-type {
background-color: lightgreen;
}
</style>La pseudo-classe :target è leggermente diversa da quelle che abbiamo visto precedentemente. Seleziona un elemento soltanto se il suo attributo HTML id (che puoi approfondire nella lezione HTML dedicata) è uguale al contenuto nell'URL che si trova dopo "#".
Ad esempio, se l'URL della pagina è biadets.com/esempio.html#elemento, verrà selezionato il <div> con id uguale a elemento.
Seleziona il primo elemento | Seleziona il secondo elemento
<a href="#contenuto1">Seleziona primo</a> | <a href="#contenuto2">Seleziona secondo</a>
<div id="contenuto1">Primo elemento</div>
<div id="contenuto2">Secondo elemento</div>
<style>
div {
background-color: lightgrey;
}
div:target {
background-color: red;
}
</style>Le pseudo-classi per la grafica della pagina web richiedono, in alcuni casi, delle interazioni da parte dell'utente per essere attivate. Ad esempio, :hover necessita che l'utente passi sopra con il mouse sull'elemento. Altri, invece, specificano uno stato di un elemento: ad esempio, :invalid specifica un <input> inserito non correttamente.
| Pseudo-classe | Descrizione |
:hover | Seleziona un elemento quando l'utente passa il mouse sopra di esso. |
:active | Seleziona un elemento mentre viene attivato dall'utente, ad esempio durante il click. |
:focus | Seleziona un elemento quando riceve il focus, come ad esempio quando un input è selezionato per l'inserimento di testo. |
:focus-visible | Seleziona un elemento quando riceve il focus, ma solo se il focus è visibile (utile per l'accessibilità). |
:focus-within | Seleziona un elemento quando esso o uno dei suoi elementi figli riceve il focus. |
:enabled | Seleziona un elemento del form (come un input) che è abilitato e può essere utilizzato. Ad esempio, non contiene l'attributo HTML disabled. |
:disabled | Seleziona un elemento del form che è disabilitato e non può essere utilizzato. Ad esempio, contiene l'attributo HTML disabled. |
:read-only | Seleziona un elemento del form che è impostato come solo lettura, quindi non può essere modificato dall'utente. Di solito, tramite l'attributo HTML readonly. |
:checked | Seleziona un input (di solito di tipo checkbox o radio) che è stato selezionato (dall'utente oppure tramite l'attributo HTML checked). |
:valid | Seleziona un elemento del form che ha passato la convalida, ad esempio un input che contiene un valore valido. |
:invalid | Seleziona un elemento del form che non ha passato la convalida, ad esempio un input di tipo email che non contiene la "@". |
:required | Seleziona un elemento del form che è contrassegnato come obbligatorio (di solito, tramite l'attributo HTML required). |
Vediamo come utilizzarli.
La pseudo-classe :hover permette di attribuire un particolare stile ad un elemento quando il mouse passa sopra di esso. È molto utilizzato nelle pagine web, perché aggiunge movimento e interazione.
<button>Cliccami</button>
<style>
button {
background-color: lightblue;
padding: 20px 30px;
margin-bottom: 2rem;
border: 0;
border-radius: 10px;
}
button:hover {
background-color: blue;
color: white;
}
</style>Esistono alcune pseudo-classi specifiche per i link, che abbiamo già visto nella lezione dei link e pulsanti.
| Pseudo-classe | Descrizione |
:link | Seleziona un link che non è stato ancora visitato dall'utente. Questa pseudo-classe è applicabile agli elementi <a> che hanno un attributo href. |
:visited | Seleziona un link che è già stato visitato dall'utente. |
Esistono delle pseudo-classi che eseguono alcune funzioni. Vediamo quali sono.
| Pseudo-classe | Descrizione |
:is() | Seleziona un elemento se corrisponde a uno dei selettori elencati all'interno della funzione :is(). È utile per raggruppare selettori e ridurre la ripetizione nel codice CSS. |
:not() | Seleziona tutti gli elementi che non corrispondono al selettore specificato all'interno della funzione :not(). |
:has() | Seleziona un elemento se esso contiene uno o più elementi figli che corrispondono al selettore specificato. |
Vediamoli in dettaglio.
La pseudo-classe :is(argomento) consente di selezionare un elemento che corrisponde a uno dei selettori indicati come argomento. Puoi usare :is() per raggruppare selettori e semplificare il CSS, rendendolo più conciso.
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<p>Questo è un paragrafo.</p>
<style>
:is(h1, h2, h3) {
color: blue;
}
</style>Nell'esempio, gli elementi <h1>, <h2>, e <h3> saranno tutti colorati di blu grazie alla pseudo-classe :is(), che permette di raggrupparli in un unico selettore.
La pseudo-classe :is() è utile quando vuoi applicare lo stesso stile a più selettori senza doverli scrivere separatamente.
La pseudo-classe :not(argomento) seleziona tutti gli elementi che non corrispondono al selettore specificato nell'argomento. È estremamente utile quando vuoi escludere certi elementi da una selezione più ampia.
<p class="evidenzia">Questo paragrafo è evidenziato.</p>
<p class="evidenzia">Questo paragrafo è evidenziato.</p>
<p>Questo paragrafo non è evidenziato.</p> <!-- Colore grigio -->
<style>
.evidenzia {
background-color: yellow;
}
p:not(.evidenzia) {
color: gray;
}
</style>In questo esempio, tutti i paragrafi che non hanno la classe evidenzia verranno colorati di grigio, mentre il paragrafo con la classe highlight manterrà il suo stile originale.
La pseudo-classe :has() seleziona un elemento se contiene uno o più elementi figli che corrispondono al selettore specificato. È molto utile per creare selezioni condizionali in base alla presenza di determinati elementi figli.
<div>
<p>Questo div contiene un paragrafo.</p> <!-- Con bordo -->
</div>
<div>
Questo div non contiene paragrafi.
</div>
<style>
div:has(p) {
border: 2px solid green;
}
</style>In questo esempio, solo il <div> che contiene un paragrafo (<p>) avrà un bordo verde. La pseudo-classe :has() consente quindi di applicare stili basati sul contenuto degli elementi.