Le pseudo-classi e gli pseudo-elementi CSS sono strumenti potenti che permettono di applicare stili avanzati in base a stati dinamici o di arricchire graficamente un sito.
In questa guida scoprirai cosa sono, come si usano e perché dovresti integrarli nel tuo flusso di lavoro per un design moderno ed efficiente.
Cosa sono le Pseudo-classi?
Esempi di pseudo-classi comuni
:hover– Attiva uno stile quando l’utente passa il mouse sopra un elemento.:focus– Si applica quando un elemento (come un input) riceve il focus, ad esempio con il tab da tastiera.:nth-child()– Permette di selezionare un figlio specifico all’interno di un contenitore.:first-childe:last-child– Selezionano rispettivamente il primo o l’ultimo elemento figlio.:checked– Utile per checkbox o radio button selezionati.
Esempio pratico
button:hover {
background-color: #0056b3;
color: #fff;
}
input:focus {
border-color: #00b894;
outline: none;
}
button:hover
- :hover è una pseudo-classe.
- Quando l’utente passa il mouse sopra un pulsante, cambia il colore di sfondo in blu scuro (#0056b3) e il testo diventa bianco (#fff).
- Utile per dare un feedback visivo e rendere i pulsanti più interattivi.
input:focus
- :focus è un’altra pseudo-classe.
- Si attiva quando il campo input riceve il focus, cioè viene cliccato o selezionato con la tastiera.
- Il bordo cambia colore (#00b894) e viene tolto il contorno di default (outline: none), per uno stile più personalizzato.
Con queste tecniche è possibile ottenere risultati visivamente accattivanti, come cornici, badge, o effetti di enfasi, senza appesantire il DOM.
Questi stili migliorano l’accessibilità e la UX, fornendo un feedback visivo immediato all’utente.
Cosa sono gli Pseudo-elementi?
Gli pseudo-elementi permettono di creare e stilizzare parti virtuali di un elemento HTML, anche se non sono esplicitamente presenti nel markup. Questo è particolarmente utile per aggiungere contenuti decorativi, animazioni o elementi di layout.
I principali pseudo-elementi
::before– Inserisce un contenuto virtuale prima del contenuto reale di un elemento.::after– Inserisce un contenuto virtuale dopo il contenuto reale.::first-line– Stilizza solo la prima riga di un paragrafo.::first-letter– Stilizza solo la prima lettera di un blocco di testo.
Esempio pratico
.card::before {
content: “”;
display: block;
height: 5px;
background-color: #ff6f61;
}
blockquote::before {
content: ““”;
font-size: 3rem;
color: #ccc;
}
.card::before
- ::before è un pseudo-elemento che crea un contenuto prima del vero contenuto di .card.
- In questo caso inserisce una barra colorata in alto alta 5px, con colore arancio-corallo (#ff6f61).
Non c’è bisogno di aggiungere niente in HTML, è tutto fatto via CSS.
blockquote::before
- Aggiunge un carattere decorativo (“, la virgoletta) prima di una citazione (blockquote).
- Il carattere è grande (3rem) e grigio chiaro (#ccc), per dare un tocco grafico.
Best practice nell’uso di pseudo-classi e pseudo-elementi
- Non abusare di ::before e ::after per contenuti semantici. Sono pensati per scopi visivi, non per informazioni importanti.
- Usa :focus per migliorare l’accessibilità. Indica all’utente dove si trova il focus, soprattutto per chi naviga da tastiera.
- Combina le pseudo-classi con le media query per creare esperienze responsive e dinamiche.
- Sii coerente nello stile: Ad esempio, mantieni effetti hover simili per tutti i pulsanti del sito.
