Le pseudo-classi di CSS sono uno strumento fondamentale per arricchire il design e l'interattività di un sito web. Grazie a queste funzionalità è possibile applicare stili ad elementi in base al loro stato o alla loro posizione all'interno della struttura HTML. Senza dover modificare il codice.
Benefici delle pseudo-classi e degli pseudo-elementi in HTML e CSS
Immaginiamo di voler cambiare il colore di un pulsante quando l'utente ci passa sopra con il mouse, oppure di evidenziare il primo elemento di un elenco e stilizzare un link già visitato. Le pseudo-classi permettono di fare tutto questo in modo semplice ed elegante.
In questa guida parleremo di cos'è una pseudo-classe, come funziona e quali sono le principali opzioni disponibili. Grazie ad alcuni esempi verrà spiegato come utilizzarle per migliorare l'aspetto di un sito e renderlo più dinamico e interattivo. Il tutto senza la necessità di scrivere codice complesso o utilizzare JavaScript.
Cosa sono e a cosa servono le pseudo-classi di CSS?
Una pseudo-classe CSS è una parola chiave che viene aggiunta ad un selettore per definire uno stato o una condizione specifica di un elemento. Non rappresenta un elemento reale del DOM ma un comportamento o una posizione. Come il passaggio del mouse su un pulsante (:hover
), la selezione di un elemento ((:checked)
) o l'essere il primo figlio in un contenitore ((:first-child)
(.
Le pseudo-classi consentono di applicare stili dinamici senza dover aggiungere classi o modificare l'HTML. Per capire il loro funzionamento immaginiamo di passare il mouse su un elemento e notare il suo cambiamento. In questo caso, quello che è cambiato è lo stato dell'elemento che è passato dallo stato normale allo stato di hover
. hover
è una pseudo-classe. Ovvero una classe che definisce il modo in cui verrà raffigurato un elemento in un determinato stato.
Sintassi e tipologie principali
Per dichiarare una pseudo-classe si usa questa sintassi:
selettore:pseudo-classe {dichiarazioni;}
I nomi delle pseudo-classi sono preceduti dai due punti (:)
. Una pseudo-classe segue senza spazi il nome del selettore e può essere associata a tutti i tipi di selettore. A seconda del risultato che si sceglie di ottenere è possibile utilizzare una pseudo-classe invece che un'altra. Tra le più utilizzate troviamo: hover
, active
e nth-child
.
:hover
:hover
si attiva quando il cursore del mouse passa sopra un elemento, senza che venga cliccato.
È comunemente utilizzata per modificare l'aspetto dei pulsanti al passaggio del mouse. Ma anche per simulare interazioni tipiche di JavaScript come la creazione di menu a tendina, in cui una sezione appare o scompare proprio quando il cursore si sposta sull'elemento corrispondente. Nell'esempio di seguito viene assegnato un colore di sfondo ad un pulsante ed un colore al testo. Queste proprietà verranno assegnate all'elemento non appena viene effettuato il passaggio del mouse sopra esso.
button:hover {
background-color: #f0f0f0;
color: #333;
}
:active
:active
, come indica il nome, permette di definire lo stile di un elemento nel momento in cui viene attivato dall'utente. Ad esempio, durante un'interazione con il mouse, un elemento entra nello stato :active
mentre il pulsante viene premuto su di esso. Ovvero per l'intero intervallo tra la pressione e il rilascio del pulsante. Nell'esempio di seguito il pulsante ha inizialmente uno sfondo blu e un testo bianco. Quando esso viene cliccato viene impostato l'evento active
e il colore di sfondo diventa un blu più scuro. Ciò avviene gradualmente grazie alla proprietà transform: scale
che simula un effetto di pressione, creando un effetto fluido e accattivante.
button {
background-color: #007BFF;
color: white;
transition: background-color 0.3s ease;
}
button:active {
background-color: #0056b3;
transform: scale(0.95);
}
:nth-child
:nth-child
permette di selezionare e formattare gli elementi in base alla loro posizione tra i figli di un genitore. In quest'ultimo esempio troviamo due casi di utilizzo di questa pseudo-classe:
li:nth-child(even) {
background-color: #f9f9f9;
}
In questo modo verranno selezionati esclusivamente gli elementi pari.
li:nth-child(3) {
color: red;
}
In questo modo, invece, verrà selezionato solamente il terzo elemento.
Altre tipologie di pseudo-classi
Dopo aver citato le principali pseudo-classi più frequentemente utilizzate, possiamo elencare anche altre tipologie simili presenti nel linguaggio CSS.
:focus
: seleziona il campo di input nel momento in cui l'utente ha cliccato per scriverci. È molto utile per dare uno stile diverso ad un tag di input quando l'utente clicca e quindi far capire che può scriverci all'interno.:checked
: seleziona i checkbox nel momento in cui vengono selezionati.:first-child
e:last-child
: selezionano, rispettivamente, il primo e l'ultimo figlio all'interno di un elemento.
Queste rappresentano solo alcune tipologie di pseudo-classi che è possibile utilizzare all'interno di una pagina HTML tramite CSS. Ciò per poter applicare stili ad elementi in base al loro stato o posizione nel DOM.
Pseudo-elementi: cosa sono e differenze principali
In un documento HTML esistono parti che non corrispondono ad elementi specifici. Esse possono comunque essere stilizzate utilizzando i CSS grazie ai cosiddetti pseudo-elementi. Il loro nome, apparentemente complesso, è dovuto al fatto che, quando si definisce una regola che li coinvolge, è come se venissero creati nuovi elementi virtuali. Visibili nella pagina ma inesistenti nel codice HTML che ne struttura il contenuto.
La sintassi degli pseudo-elementi
La sintassi degli pseudo-elementi è praticamente uguale a quella usata per le pseudo-classi. Essi non possono essere dichiarati da soli ma vanno sempre collegati ad altri selettori. Così come abbiamo fatto precedentemente, vediamo i due pseudo-elementi principali esistenti nel linguaggio CSS. Questi sono :before
, che inserisce un contenuto prima dell'elemento individuato dal selettore selezionato, ed after
, che inserisce il contenuto dopo l'elemento.
elemento:before {
content: "contenuto";
}
elemento:after {
content: "contenuto";
}
Quanto inserito con questi due pseudo-elementi viene definito contenuto generato. Esso può essere una semplice stringa di testo, un URL, un contatore numerico, virgolette automatiche o persino il valore di un attributo HTML selezionato tramite un selettore di attributi. Inoltre, è possibile definire anche un box generico a cui si possono applicare varie proprietà CSS. Questa flessibilità rende tale tecnica estremamente potente e versatile.
Per poter spiegare meglio la funzionalità di questi pseudo-elementi procediamo con un esempio in cui inseriamo un cuore (❤️) prima del testo e una stella (⭐) dopo il testo. Nella pagina HTML inseriamo in un punto qualunque un div
con del testo all'interno:
<div class="testo">
Coding Creativo
</div>
Poi nel CSS andiamo ad inserire le regole per il before
e l'after
. Ad entrambi assegniamo la proprietà content
e per il cuore inseriamo il codice \2665
. Mentre per la stella inseriamo il codice \2605
. Impostiamo poi il colore rosso per il cuore e giallo per la stella. Infine assegniamo una dimensione del font e un padding opportuno.
.testo::before {
content: '\2665';
color: red;
font-size: 25px;
padding-right: 5px;
}
.testo::after {
content: '\2605';
color: gold;
font-size: 25px;
padding-left: 5px;
}
Dopo aver analizzato questi esempi pratici, per riepilogare la differenza tra pseudo-classi e pseudo-elementi possiamo dire che le prime agiscono sugli stati o posizioni di un elemento. I secondi creano invece elementi virtuali per decorare l'HTML.
Conclusioni e considerazioni su su pseudo-classi e pseudo-elementi CSS
Le pseudo-classi e i pseudo-elementi CSS offrono strumenti preziosi per arricchire il design e migliorare l'interattività delle pagine web. Grazie a queste funzionalità e alla loro interazione possiamo manipolare lo stile degli elementi in base al loro stato o creare contenuti virtuali senza dover modificare l'HTML. La loro versatilità consente di affrontare numerosi scenari. Dall'evidenziare interazioni utente al migliorare l'accessibilità visiva dei contenuti.
Approfondire e padroneggiare questi concetti è un passo importante per chi desidera portare i propri progetti web a un livello superiore.