Pseudo-classe CSS

Cos'è una pseudo-classe?

Le pseudo-classi vengono usate per definire stati speciali degli elementi.

Ad esempio, può essere usato per:

  • Imposta lo stile degli elementi quando il mouse è sopra
  • Imposta stili diversi per i link visitati e non visitati
  • Imposta lo stile degli elementi quando vengono selezionati
Metti il mouse sopra a me

Sintassi

Sintassi delle pseudo-classi:

selector:pseudo-classe {
  proprietà: valore;
}

pseudo-classe diancora

I link possono essere visualizzati in modi diversi:

Esempio

/* Link non visitato */
a:link {
  color: #FF0000;
}
/* Link visitato */
a:visited {
  color: #00FF00;
}
/* Link hover */
a:hover {
  color: #FF00FF;
}
/* Link selezionato */
a:active {
  color: #0000FF;
}

Prova tu stesso

Attenzione:a:hover Deve essere definito dopo di a:link e a:visited per essere effettivo!a:active Deve essere definito dopo di a:hover deve essere definito dopo di loro! I nomi delle pseudo-classi sono insensibili alle maiuscole e minuscole.

Pseudo-classi e classi CSS

Le pseudo-classi possono essere usate insieme alle classi CSS:

Quando metti il mouse sopra il link dell'esempio, cambia colore:

Esempio

a.highlight:hover {
  color: #ff0000;
}

Prova tu stesso

hover sul <div>

usato sul elemento <div> :hover Esempio di pseudo-classe:

Esempio

div:hover {
  background-color: blue;
}

Prova tu stesso

Semplice tooltip hover

Passa il mouse sopra l'elemento <div> per visualizzare l'elemento <p> (effetto simile a un tooltip):

Passa il mouse sopra di me per visualizzare l'elemento <p>.

Ehi, sono qui!

Esempio

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Prova tu stesso

CSS - :first-child pseudo-classe

:first-child Le pseudo-classi corrispondono all'elemento specificato: l'elemento è il primo figlio di un altro elemento.

Corrisponde al primo <p> elemento

Nell'esempio seguente, il selettore corrisponde a qualsiasi elemento <p> che è il primo figlio di qualsiasi altro elemento:

Esempio

p:first-child {
  color: blue;
}

Prova tu stesso

Corrisponde a tutti gli elementi <i> all'interno di tutti gli elementi <p>

Nell'esempio seguente, il selettore corrisponde a tutti gli elementi <i> che sono il primo figlio di un elemento <p>:

Esempio

p i:first-child {
  color: blue;
}

Prova tu stesso

Corrisponde a tutti gli elementi <i> all'interno del primo <p> elemento

Nell'esempio seguente, il selettore corrisponde a tutti gli elementi <i> all'interno di un elemento <p> che è il primo figlio di un altro elemento:

Esempio

p:first-child i {
  color: blue;
}

Prova tu stesso

CSS - :lang pseudo-classe

:lang Le pseudo-classi permettono di definire regole speciali per lingue diverse.

Nell'esempio seguente,:lang Definisci virgolette per l'elemento <q> con attributo lang="en":

Esempio

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Qualche testo <q lang="no">Una citazione in un paragrafo</q> Qualche testo.</p>
</body>
</html>

Prova tu stesso

Più esempi

Aggiungere stili diversi ai link
Questo esempio dimostra come aggiungere altri stili ai link.
Usare :focus
Questo esempio dimostra come utilizzare la pseudo-classe :focus.

Tutte le pseudo-classi CSS

Selettore Esempio Descrizione dell'esempio
:active a:active Seleziona ogni link attivo.
:checked input:checked Seleziona ogni elemento <input> selezionato.
:disabled input:disabled Seleziona ogni elemento <input> disabilitato.
:empty p:empty Seleziona ogni elemento <p> senza elementi figli.
:enabled input:enabled Scegli ogni elemento <input> abilitato.
:first-child p:first-child Scegli ogni <p> che è il primo figlio dell'elemento padre.
:first-of-type p:first-of-type Scegli ogni <p> che è il primo elemento del tipo dell'elemento padre.
:focus input:focus Scegli l'elemento <input> che ha l'attenzione.
:hover a:hover Scegli il link sul quale si trova il mouse.
:in-range input:in-range Scegli ogni elemento <input> con un valore nell'intervallo specificato.
:invalid input:invalid Scegli ogni elemento <input> con un valore invalido.
:lang(language) p:lang(it) Scegli ogni <p> che ha un valore dell'attributo lang che inizia con "it".
:last-child p:last-child Scegli ogni <p> che è l'ultimo figlio dell'elemento padre.
:last-of-type p:last-of-type Scegli ogni <p> che è l'ultimo elemento del tipo dell'elemento padre.
:link a:link Scegli tutti i link non visitati.
:not(selector) :not(p) Scegli ogni elemento che non è <p>.
:nth-child(n) p:nth-child(2) Scegli ogni <p> che è il secondo figlio dell'elemento padre.
:nth-last-child(n) p:nth-last-child(2) Scegli ogni <p> che è il secondo figlio dell'elemento padre, contando dall'ultimo figlio.
:nth-last-of-type(n) p:nth-last-of-type(2) Scegli ogni <p> che è il secondo figlio dell'elemento padre, contando dall'ultimo figlio.
:nth-of-type(n) p:nth-of-type(2) Scegli ogni <p> che è il secondo figlio dell'elemento padre.
:only-of-type p:only-of-type Scegli ogni <p> che è l'unico elemento del tipo dell'elemento padre.
:only-child p:only-child Scegli l'elemento <p> che è l'unico figlio dell'elemento padre.
:optional input:optional Selezionare gli elementi <input> senza l'attributo "required".
:out-of-range input:out-of-range Selezionare gli elementi <input> con un valore al di fuori dell'intervallo specificato.
:read-only input:read-only Selezionare gli elementi <input> che hanno l'attributo "readonly".
:read-write input:read-write Selezionare gli elementi <input> senza l'attributo "readonly".
:required input:required Selezionare gli elementi <input> che hanno l'attributo "required".
:root root Selezionare l'elemento radice dell'elemento.
:target #news:target Selezionare l'elemento #news attivo (cliccare sull'URL che contiene il nome dell'ancora).
:valid input:valid Selezionare tutti gli elementi <input> con un valore valido.
:visited a:visited Selezionare tutti i link visitati.

Tutti i pseudo-elementi CSS

Selettore Esempio Descrizione dell'esempio
::after p::after Inserire il contenuto dopo ogni elemento <p>.
::before p::before Inserire il contenuto prima di ogni elemento <p>.
::first-letter p::first-letter Selezionare la prima lettera di ogni elemento <p>.
::first-line p::first-line Selezionare la prima riga di ogni elemento <p>.
::selection p::selection Selezionare la parte dell'elemento selezionato dall'utente.