10.1 Pseudoclassi
Le pseudoclassi e i pseudo-elementi in HTML e CSS permettono di stilizzare gli elementi in base al loro stato o contenuto, senza la necessità di aggiungere classi aggiuntive o modificare la struttura del documento HTML. Offrono strumenti fantastici per creare pagine web interattive e esteticamente attraenti.
Le pseudoclassi si applicano agli elementi in base al loro stato o posizione nella struttura del documento. Aiutano a stilizzare gli elementi in diverse situazioni, come l'hover del mouse, il focus o la selezione degli elementi. Le pseudoclassi iniziano con i due punti (:).
Le pseudoclassi più semplici:
La pseudoclasse :hover si applica a un elemento quando l'utente ci passa sopra con il mouse.
<button type="button">Bottone</button>
button:hover {
color: red;
}
La pseudoclasse :focus si applica a un elemento quando riceve il focus, ad esempio, quando si fa clic su un campo di input.
<input type="text">
input:focus {
outline-color: blue;
}
La pseudoclasse :active si applica a un elemento quando è attivo, ad esempio, quando si fa clic su un link o un pulsante.
<button type="button">Bottone</button>
button:active {
background-color: green;
}
La pseudoclasse :visited si applica ai link che l'utente ha già visitato.
<a href="#">Link</a>
a:visited {
color: purple;
}
10.2 Pseudo-elementi
Gli pseudo-elementi permettono di stilizzare parti di elementi che non sono elementi HTML separati. Iniziano con i due punti doppi (::). Gli pseudo-elementi vengono utilizzati per creare e stilizzare il contenuto prima o dopo un elemento, evidenziare la prima riga o la prima lettera di un elemento e altre attività.
Gli pseudo-elementi più semplici:
Lo pseudo-elemento ::before inserisce contenuti prima del contenuto dell'elemento.
<p>Mi chiamo Stepan.</p>
p::before {
content: "Ciao! ";
color: blue;
}
Lo pseudo-elemento ::after inserisce contenuti dopo il contenuto dell'elemento.
<p>Attenzione!</p>
p::after {
content: " Grazie per l'attenzione!";
color: red;
}
Lo pseudo-elemento ::first-line si applica alla prima riga di un elemento. Consente di stilizzare solo la prima riga del testo.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
Lo pseudo-elemento ::selection si applica al testo selezionato dall'utente.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Prova a selezionare il testo nel risultato.
10.3 Esempi di utilizzo degli pseudo-elementi
Le pseudoclassi e gli pseudo-elementi in HTML e CSS offrono grandi opportunità per stilizzare gli elementi in base al loro stato o contenuto. Permettono di creare pagine web più interattive e visivamente accattivanti senza modificare la struttura HTML.
Esempio 1: Inserimento di un'icona prima del testo del link
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Questo è un link con un'icona</a>
</body>
</html>
Esempio 2: Aggiunta di un blocco stilizzato dopo un paragrafo
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Questo è un paragrafo di testo.</p>
</body>
</html>
Combinazione
Pseudoclassi e pseudo-elementi possono essere combinati per creare stili complessi e potenti.
Esempio: Stilizzazione del testo selezionato all'interno di un link al passaggio del mouse
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Seleziona questo testo e poi passa sopra con il mouse.</a>
</body>
</html>
GO TO FULL VERSION