CSS Pseudo-classe (Pseudo-classe)

I selettori di pseudo-classi CSS abbinano componenti in base a condizioni diverse, non necessariamente definite dall'albero del documento. Un pseudo-classe CSS è una parola chiave aggiunta al selettore che specifica lo stato speciale dell'elemento da selezionare. Ad esempio, :hover può essere utilizzato per cambiare il colore di un pulsante quando l'utente lo posiziona sopra con il mouse.

Cos'è un pseudo-classe

Le pseudo-classi CSS ti permettono di impostare lo stile degli elementi in stato dinamico, come l'hover, lo stato attivo e lo stato di focus, nonché gli elementi esistenti nel albero del documento ma non raggiungibili tramite altri selettori, senza aggiungere alcun selettore per il loro ID o classe, come per esempio per il primo o l'ultimo figlio.

Le classi pseudo iniziano con due punti (:). La loro sintassi può essere fornita nel modo seguente: }}

La seguente sezione descrive le classi pseudo più comuni.

Classe pseudo degli anchor

UsareAncoraLe classi pseudo dei link possono essere visualizzate in modi diversi:

Queste classi pseudo ti permettono di stilizzare i link non visitati e i link visitati. La tecnica di impostazione più comune è rimuovere il trattino basso dai link visitati.

color: blue;
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Alcune classi pseudo degli anchor sono dinamiche - vengono applicate a causa dell'interazione dell'utente con il documento (ad esempio hover o focus ecc.).

color: red;
　　　　color: red;
}
color: red;
　　　　color: gray;
}
a:focus {
　　　　color: none;
}

Queste classi pseudo cambiano il modo in cui i link rispondono alle operazioni dell'utente.

• Quando l'utente mette il cursore sopra un elemento ma non lo seleziona :hover è applicabile.

• Quando un elemento viene attivato o cliccato :active è applicabile.

• Quando un elemento ha il focus della tastiera :focus è applicabile.

Classe pseudo :first-child

La classe pseudo :first-child corrisponde all'elemento primo figlio di alcuni altri elementi. Nell'esempio seguente ol li:first-child, il selettore seleziona il primo elemento dell'elenco ordinato e rimuove il bordo superiore.

ol li:first-child {
　　　　border-top: none;
}

Classe pseudo :last-seudo

La classe pseudo :last-child corrisponde all'ultimo elemento figlio di alcuni altri elementi. Nell'esempio seguente ul li:last-child, il selettore seleziona l'ultimo elemento dell'elenco non ordinato e rimuove il bordo destro.

ul li:last-child {
　　　　border-right: none;
}

：nth-child伪类

Pseudoclassi :nth-child

CSS3 ha introdotto un nuovo pseudoclassi :nth-child che ti permette di selezionare uno o più sottooggetti specifici di un elemento genitore. La sintassi di base può essere combinata con :nth-child(N), dove N è un parametro che può essere un numero, una parola chiave (even o odd) o una forma come xn+y, dove x e y sono interi (ad esempio 1n, 2n, 2n+1, ecc.).
　　　　table tr:nth-child(2n) td {
}

background: #eee;

Pseudoclassi :nth-child(N) CSS è molto utile quando è necessario selezionare elementi che appaiono in un documento a intervalli specifici o secondo un modello (ad esempio in posizioni pari o dispari, ecc.).

Pseudoclassi :langDefiniti elementi per dare chiaramente un valore linguistico all'intero no. Pseudoclassi di linguaggio :lang permettono di costruire selettori in base a specifici tag linguistici. Esempio di pseudoclassi :lang

q:lang(no) {
　　　　quotes: "~" "~";
}
/* Snip di codice HTML */ Alcuni testi Some text Un citato in un paragrafo Some text.

Pseudoclassi e classi CSS

I pseudoclassi possono essere usati insieme alle classi CSS.

class="red" nel seguente esempio, i link avranno un colore rosso.

a.red:link {　　　　/* Regola di stile */
　　　　color: #ff0000;
}
<a class="red" href="#">Clicca su di me</a>　　　　/* Snip di codice HTML */