Quali sono pseudo-classi?
Una pseudo-classe viene utilizzata per definire un particolare stato di un elemento.
Ad esempio, può essere utilizzato per:
- Lo stile di un elemento quando un utente mouse su di esso
- Style visitati e non visitati i collegamenti in modo diverso
- Lo stile di un elemento quando si fa attenzione
Mouse Over Me
Sintassi
La sintassi di pseudo-classi:
selector:pseudo-class {
property:value;
}Anchor pseudo-classi
I link possono essere visualizzati in diversi modi:
Esempio
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Prova tu stesso "  | Nota: a:hover deve venire dopo a:link e a:visited ! Nella definizione CSS al fine di essere efficace a:active deve venire dopo a:hover nella definizione CSS, per essere efficace!nomi pseudo-classe non sono case-sensitive. |
|---|
Pseudo-classi e classi CSS
Le pseudo-classi possono essere combinate con le classi CSS:
Quando si posiziona il mouse sopra il link nell'esempio, cambierà colore:
Passa il <div>
Un esempio di utilizzo del :hover pseudo-classe su un <div> elemento:
CSS - L' :first-child pseudo-classe
L' :first-child pseudo-classe corrisponde a un elemento specifico che è il primo figlio di un altro elemento.
Partita la prima <p> elemento
Nel seguente esempio, il selettore corrisponde a qualsiasi <p> elemento che è il primo figlio di qualsiasi elemento:
Corrispondere i primi <i> dell'elemento in tutte le <p> elementi
Nel seguente esempio, il selettore seleziona il primo <i> elemento in tutti <p> elementi:
Hanno tutte <i> elementi in tutto il primo figlio <p> elementi
Nel seguente esempio, il selettore seleziona tutti <i> elementi <p> elementi che sono il primo figlio di un altro elemento:
CSS - L' :lang pseudo-classe
L' :lang pseudo-classe permette di definire norme specifiche per le diverse lingue.
Nell'esempio che segue, :lang definisce le virgolette per <q> elementi con lang="no" :
Esempio
<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>
Prova tu stesso " 
Altri esempi
Aggiungere stili diversi per collegamenti ipertestuali
Questo esempio dimostra come aggiungere altri stili di collegamenti ipertestuali.
L'utilizzo di :focus
Questo esempio dimostra come utilizzare il :focus pseudo-classe.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
Tutte le classi CSS Pseudo
| Selettore | Esempio | descrizione esempio |
|---|---|---|
| :active | a:active | Seleziona il collegamento attivo |
| :checked | input:checked | Seleziona ogni verificato <input> elemento |
| :disabled | input:disabled | Seleziona ogni disabilitato <input> elemento |
| :empty | p:empty | Seleziona ogni <p> elemento che non ha figli |
| :enabled | input:enabled | Seleziona ogni abilitato <input> elemento |
| :first-child | p:first-child | Seleziona ogni <p> elementi che è il primo figlio del suo genitore |
| :first-of-type | p:first-of-type | Seleziona ogni <p> elemento che è il primo <p> elemento del suo genitore |
| :focus | input:focus | Seleziona il <input> elemento che ha il focus |
| :hover | a:hover | Seleziona link al passaggio del mouse |
| :in-range | input:in-range | Seleziona <input> elementi con un valore all'interno di un intervallo specificato |
| :invalid | input:invalid | Seleziona tutti <input> elementi con un valore non valido |
| :lang(language) | p:lang(it) | Seleziona ogni <p> elemento con un valore di attributo lang inizia con "esso" |
| :last-child | p:last-child | Seleziona ogni <p> elementi che è l'ultimo figlio del suo genitore |
| :last-of-type | p:last-of-type | Seleziona ogni <p> elemento che è l'ultimo <p> elemento del suo genitore |
| :link | a:link | Seleziona tutti i collegamenti non visitati |
| :not(selector) | :not(p) | Seleziona ogni elemento che non è un <p> elemento |
| :nth-child(n) | p:nth-child(2) | Seleziona ogni <p> elemento che è il secondo figlio del suo genitore |
| :nth-last-child(n) | p:nth-last-child(2) | Seleziona ogni <p> elemento che è il secondo figlio del suo genitore, contando dall'ultimo bambino |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Seleziona ogni <p> elemento che è il secondo <p> elemento del suo genitore, contando dall'ultimo bambino |
| :nth-of-type(n) | p:nth-of-type(2) | Seleziona ogni <p> elemento che è il secondo <p> elemento del suo genitore |
| :only-of-type | p:only-of-type | Seleziona ogni <p> elemento che è l'unico <p> elemento del suo genitore |
| :only-child | p:only-child | Seleziona ogni <p> elemento che è l'unico figlio del suo genitore |
| :optional | input:optional | Seleziona <input> elementi senza "required" l'attributo |
| :out-of-range | input:out-of-range | Seleziona <input> elementi con un valore al di fuori di un intervallo specificato |
| :read-only | input:read-only | Seleziona <input> elementi con una "readonly" attributo specificato |
| :read-write | input:read-write | Seleziona <input> elementi con nessun "readonly" attributo |
| :required | input:required | Seleziona <input> elementi con una "required" attributo specificato |
| :root | root | Seleziona elemento radice del documento |
| :target | #news:target | Seleziona l'attuale elemento #news attiva (cliccato su un URL che contiene quel nome ancora) |
| :valid | input:valid | Seleziona tutti <input> elementi con un valore valido |
| :visited | a:visited | Seleziona tutti i link visitati |
Tutti i CSS Pseudo elementi
| Selettore | Esempio | descrizione esempio |
|---|---|---|
| ::after | p::after | Inserisci contenuto dopo ogni <p> elemento |
| ::before | p::before | Inserisci contenuto prima di ogni <p> elemento |
| ::first-letter | p::first-letter | Seleziona la prima lettera di ogni <p> elemento |
| ::first-line | p::first-line | Seleziona la prima riga di ogni <p> elemento |
| ::selection | p::selection | Seleziona la porzione di un elemento selezionato da un utente |