- Blog
- Programmazione
- CSS
- CSS3 - Pseudo-classi
CSS3 - Pseudo-classi
- Programmazione
- CSS
- Giuseppe Ventura
- 18/09/2023
Cosa sono le pseudo-classi?
Una pseudo-classe è utilizzata per definire uno stato speciale di un elemento.
Per esempio, può essere utilizzata per:
- Applicare uno stile quando un utente passa sopra l'elemento col mouse
- Applicare uno stile diverso ai collegamenti visitati e non visitati
- Applicare uno stile a un elemento quanto ottiene il focus
Sintassi
Ecco la sintassi di una pseudo-classe:
selettore:pseudo-classe {
proprietà: valore;
}
Pseudo-classi dei collegamenti
I collegamenti possono essere visualizzati in modi differenti:
Esempio
/* collegamento non visitato */
a:link {
color: #FF0000;
}
/* collegamento visitato */
a:visited {
color: #00FF00;
}
/* passaggio del mouse sopra il collegamento */
a:hover {
color: #FF00FF;
}
/* collegamento selezionato */
a:active {
color: #0000FF;
}
Pseudo-classi e classi HTML
Le pseudo-classi possono essere combinate con le classi HTML:
Quando si passerà sopra il link, nell'esempio, cambierà colore:
a.highlight:hover {
color: #ff0000;
}
Hover su <div>
Un esempio dell'uso della pseudo-classe :hover su un elemento<div>:
div:hover {
background-color: blue;
}
Suggerimento semplice al passaggio del mouse
Passare il mouse su un elemento <div> per mostrare un elemento <p> (come un suggerimento - tooltip):
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
La pseudo-classe :first-child
La pseudo-classe :first-child corrisponde a un elemento specificato che è il primo figlio di un altro elemento.
Corrispondenza del primo elemento <p>
Nell'esempio seguente, il selettore corrisponde a qualsiasi elemento <p> che sia il primo figlio di qualsiasi elemento:
p:first-child {
color: blue;
}
Corrispondenza del primo elemento <i> in tutti gli elementi <p>
Nell'esempio seguente, il selettore corrisponde al primo elemento <i> in tutti gli elementi <p>:
p i:first-child {
color: blue;
}
Corrispondenza di tutti gli elementi <i> in tutti i primi elementi figlio <p>
Nell'esempio seguente, il selettore corrisponde a tutti gli elementi <i> che sono i primi figli di un altro elemento:
p:first-child i {
color: blue;
}
La pseudo-classe :lang
La pseudo-classe :lang permette di definire regole speciali per linguaggi differenti.
Nell'esempio seguente, :lang definisce le virgolette delle citazioni per l'elemento <q> con lang="no":
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Tutte le pseudo-classi in CSS
| Selettore | Esempio | Descrizione esempio |
|---|---|---|
| :active | a:active | Seleziona il link attivo |
| :checked | input:checked | Seleziona ogni elemento <input> checked |
| :disabled | input:disabled | Seleziona ogni elemento <input> disabled |
| :empty | p:empty | Seleziona ogni elemento <p> che non ha figli |
| :enabled | input:enabled | Seleziona ogni elemento <input> abilitato |
| :first-child | p:first-child | Seleziona ogni elemento <p> che è il primo figlio del suo genitore |
| :first-of-type | p:first-of-type | Seleziona ogni elemento <p> che è il primo elemento <p> del suo genitore |
| :focus | input:focus | Seleziona l'elemento <input> che ha il focus |
| :hover | a:hover | Seleziona i collegamenti al passaggio del mouse |
| :in-range | input:in-range | Seleziona gli elementi <input> con un valore compreso in un intervallo specificato |
| :invalid | input:invalid | Seleziona tutti gli elementi <input> con un valore non valido |
| :lang(language) | p:lang(it) | Seleziona ogni elemento <p> con un valore di attributo lang che inizia con "it" |
| :last-child | p:last-child | Seleziona ogni <p> elemento che è l'ultimo figlio del suo genitore |
| :last-of-type | p:last-of-type | Seleziona ogni elemento <p> che è l'ultimo elemento <p> del suo genitore |
| :link | a:link | Seleziona tutti i collegamenti non visitati |
| :not(selector) | :not(p) | Seleziona ogni elemento che non sia un elemento <p> |
| :nth-child(n) | p:nth-child(2) | Seleziona ogni elemento <p> che è il secondo figlio del suo genitore |
| :nth-last-child(n) | p:nth-last-child(2) | Seleziona ogni elemento <p> che è il secondo figlio del suo genitore, contando dall'ultimo figlio |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Seleziona ogni elemento <p> che è il secondo elemento <p> del suo genitore, contando dall'ultimo figlio |
| :nth-of-type(n) | p:nth-of-type(2) | Seleziona ogni elemento <p> che è il secondo elemento <p> del suo genitore |
| :only-of-type | p:only-of-type | Seleziona ogni elemento <p> che è l'unico elemento <p> del suo genitore |
| :only-child | p:only-child | Seleziona ogni elemento <p> che è l'unico figlio del suo genitore |
| :optional | input:optional | Seleziona gli elementi <input> senza attributo "required". |
| :out-of-range | input:out-of-range | Seleziona gli elementi <input> con un valore esterno all'intervallo specificato |
| :read-only | input:read-only | Seleziona gli elementi <input> con un attributo "readonly" specificato |
| :read-write | input:read-write | Seleziona gli elementi <input> senza attributo "readonly". |
| :required | input:required | Seleziona gli elementi <input> con un attributo "required" specificato |
| :root | root | Seleziona l'elemento radice del documento |
| :target | #news:target | Seleziona l'elemento #news attualmente attivo (cliccato su un URL contenente quel nome di ancoraggio) |
| :valid | input:valid | Seleziona tutti gli elementi <input> con un valore valido |
| :visited | a:visited | Seleziona tutti i collegamenti visitati |