Pseudo-Classe in CSS | Spiegato

Lo styling di elementi HTML sulla base dello stato in cui si trovano può essere un compito interessante che può migliorare l'aspetto generale e l'esperienza utente di un sito Web. CSS fornisce alcune classi per questo compito, che vengono indicate come pseudo-Classe. Questo post è progettato per far luce sugli pseudo-Classe e il loro utilizzo. Prima di saltare al nostro argomento principale dai un'occhiata al contenuto che passerai in questo post.

1. Cosa sono le classe pseudo
2. : Classe di collegamento
3. : classe visitata
4. : classe Hover
5. : classe attiva
6. : Focus Class
7. : classe del primo figlio
8. : Lang Class

Iniziamo.

Cosa sono le classe pseudo

Classe pseudo in CSS descrivono uno stato unico di un elemento HTML e basato su questi stati gli effetti speciali possono essere aggiunti agli elementi usando un selettore CSS insieme a queste classi.

Sintassi

Selettore: Pseudo-Classe

costo dell'immobile;

Ci sono vari pseudo-Classe nei CSS, tuttavia ne discuteremo di alcuni importanti in questo articolo.

: Classe di collegamento

Questa classe è utilizzata per modellare un collegamento che non è ancora visitato.

Esempio

Supponiamo di voler aggiungere un link al tuo sito Web e dargli un certo stile quando non viene ancora visitato dall'utente. Segui il codice qui sotto.

Suggerimento Linux

Nel codice sopra, abbiamo fornito un collegamento all'attributo HREF del tag di ancoraggio e usando la classe di collegamento: gli stiamo dando il colore verde quando è nello stato non visitato.

Produzione

Il collegamento è stato disegnato con successo utilizzando la classe: link.

: classe visitata

Questa classe viene utilizzata per modellare un collegamento che l'utente ha visitato.

Esempio

L'esempio seguente dimostra il funzionamento della classe: seguire l'esempio seguente.

Suggerimento Linux

Qui stiamo assegnando il colore verde allo stato visitato del link. Significa che quando apri il link, il colore cambierà in verde.

Produzione

Prima di visitare il link.

Quando visiti il ​​link.

Lo stato visitato del collegamento è stato disegnato usando la classe visitata.

: classe Hover

Questa classe viene utilizzata per modellare un elemento quando viene portato un cursore del mouse.

Esempio

Supponiamo di voler evidenziare un elemento ogni volta che l'utente porta il mouse su quel particolare elemento.

Porta il mouse su di me

Nel codice sopra, abbiamo creato un

elemento e usato la classe: hover per dargli un colore giallo. Ora ogni volta che porti il ​​mouse sull'elemento il colore cambierà in giallo.

Produzione

La: Hover Class funziona correttamente.

: classe attiva

Questa classe è usata per modellare un elemento quando è attiva.

Esempio

Supponiamo che tu voglia un collegamento per cambiare il suo colore quando viene cliccato.

Suggerimento Linux

Ora quando l'utente fa clic sul collegamento, in quel momento il colore del collegamento cambierà in rosa.

Produzione

Prima di fare clic sul collegamento.

Quando si fa clic sul collegamento.

Lo stato attivo del collegamento è stato disegnato con successo.

: Focus Class

Questa classe viene utilizzata per modellare un elemento quando è sotto focus.

Esempio

Accenda un campo di input modificando il colore di sfondo quando un utente si concentra su di esso facendo clic su di esso.

Inserisci il tuo nome:

Secondo il codice sopra, quando un utente fa clic sul campo di input, il colore di sfondo cambierà in rosa.

Produzione

Il colore di sfondo del campo di input è cambiato correttamente.

: classe del primo figlio

Questa classe viene utilizzata per modellare il primo figlio di un elemento specificato.

Esempio

Supponiamo di voler applicare la proprietà CSS solo sul primo figlio di un elemento div. Usa il seguente codice.

Questo paragrafo è il primo figlio del div

Questo paragrafo è il secondo figlio del div

Nel codice sopra stiamo usando la classe: primo figlio per allineare il testo del

elemento che è il primo figlio dell'elemento.

Produzione

Il primo

L'elemento è stato allineato a destra usando la classe di primo figlio.

: Lang Class

Questa classe viene utilizzata per specificare un linguaggio che deve essere utilizzato in un particolare elemento. Questa classe è utile quando si specificano le regole per più lingue in un documento.

Esempio

Nell'esempio seguente, stiamo specificando alcune regole per

elemento con attributo lang = "en". Questa serie di regole verrà applicata a ogni

Elemento con questo attributo.

Questo è il primo paragrafo.

Questo è il secondo paragrafo.

Questo è il terzo paragrafo.

Produzione

Come puoi vedere che il primo e il terzo

Elements ha atribute lang = "en" pertanto, le regole definite per questa classe si applicheranno solo sul primo e il terzo

elementi.

Conclusione

Le classe pseudo descrivono uno stato unico di un elemento HTML e basato su questi stati gli effetti speciali possono essere aggiunti agli elementi. Esistono molti pseudo-Classe nei CSS, tuttavia alcuni dei significativi sono: Link Class ,: Classe visitata ,: Classe Hover ,: Classe attiva ,: Classe Focus ,: Classe del primo figlio e: Lang Classe. Queste classi sono spiegate in modo approfondito in questo post insieme ai loro esempi rilevanti.