8.1 Concetti di base
Combinare pseudoclassi e pseudo-elementi in CSS ti consente di creare selettori potenti e flessibili per stilizzare gli elementi in base al loro stato, struttura e contenuto. Questo apre molte possibilità per creare stili complessi e dinamici, migliorando l'interfaccia utente e l'esperienza di navigazione nella pagina web.
Fondamenti della combinazione
Pseudoclassi
Le pseudoclassi sono indicate con un solo due punti (:) e vengono applicate agli elementi in base al loro stato o posizione. Ad esempio:
:hover— si applica quando il cursore passa sopra un elemento:first-child— seleziona il primo figlio di un elemento genitore
Pseudo-elementi
Gli pseudo-elementi sono indicati con due punti (::) e vengono utilizzati per stilizzare parti degli elementi o per aggiungere contenuto. Ad esempio:
::before— aggiunge contenuto prima dell'elemento::first-letter— stilizza la prima lettera di un elemento
Combinazione
Le pseudoclassi e gli pseudo-elementi possono essere combinati per creare selettori complessi che ti permettono di applicare stili agli elementi in base al loro stato e struttura.
Sintassi:
selettore:pseudoclasse::pseudo-elemento {
proprietà: valori;
}
8.2 Combinazione per l'interattività
Esempio 1: Stilizzare la prima lettera al passaggio del mouse
In questo esempio, la prima lettera di un paragrafo viene ingrandita e colorata di rosso al passaggio del mouse sul paragrafo:
/* Stilizzare la prima lettera del paragrafo al passaggio del mouse */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Esempio 2: Aggiungere contenuto prima del link al focus
In questo esempio, un'icona viene aggiunta prima del link e colorata di blu quando il link riceve il focus:
/* Aggiungere un'icona prima del link al focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Combinazione per stilizzare la struttura
Esempio 3: Stilizzare il primo paragrafo all'interno di un div con contenuto aggiunto
In questo esempio, la prima riga del primo paragrafo all'interno di un div viene evidenziata in grassetto e colorata di verde:
/* Stilizzare la prima riga del primo paragrafo all'interno di un div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Esempio 4: Aggiungere un elemento decorativo dopo l'ultimo elemento della lista
In questo esempio, un elemento decorativo viene aggiunto dopo l'ultimo elemento della lista e colorato di rosso:
/* Aggiungere un elemento decorativo dopo l'ultimo elemento della lista */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Combinazione per condizioni complesse
Esempio 5: Stilizzare gli elementi pari della lista al passaggio del mouse
In questo esempio, gli elementi pari della lista ricevono uno sfondo grigio chiaro e un testo di colore blu al passaggio del mouse:
/* Stilizzare gli elementi pari della lista al passaggio del mouse */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Esempio 6: Stilizzare i link attivi già visitati
In questo esempio, i link che sono stati visitati e si trovano in stato attivo vengono colorati di arancione e sottolineati:
/* Stilizzare i link attivi già visitati */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Esempio di implementazione completa
/* Stilizzare la prima riga del primo paragrafo all'interno di un div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Aggiungere un elemento decorativo dopo l'ultimo elemento della lista */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Stilizzare gli elementi pari della lista al passaggio del mouse */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Aggiungere un'icona prima del link al focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Stilizzare la prima lettera del paragrafo al passaggio del mouse */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di combinazione di pseudoclassi e pseudo-elementi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Questo è il primo paragrafo all'interno del div.</p>
<p>Questo è il secondo paragrafo all'interno del div.</p>
</div>
<ul>
<li>Elemento della lista 1</li>
<li>Elemento della lista 2</li>
<li>Elemento della lista 3</li>
<li>Elemento della lista 4</li>
</ul>
<a href="#">Link con icona al focus</a>
<p>Passa sopra questo paragrafo per vedere l'effetto sulla prima lettera.</p>
</body>
</html>
GO TO FULL VERSION