Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Miglioramento degli Stili con le Pseudo-Classi di Azione dell'Utente | Introduzione a CSS
Fondamenti Di CSS

bookMiglioramento degli Stili con le Pseudo-Classi di Azione dell'Utente

Le pseudo-classi di azione dell'utente consentono di stilizzare gli elementi in base a come gli utenti interagiscono con essi. Sono comunemente applicate agli elementi <button> e <a> per fornire un feedback durante le interazioni.

La sintassi è la seguente:

selector:pseudo-class {
  property: value;
}
  • selector può essere qualsiasi selettore trattato nei capitoli precedenti;
  • pseudo-class richiede : prima della dichiarazione, senza aggiungere spazi.
Note
Nota

Considereremo le pseudo-classi di stato più utili (hover, focus, active e visited).

:hover

Si attiva quando un utente punta un elemento con il cursore del mouse. Ideale per fornire un feedback visivo interattivo.

index.html

index.html

styles.css

styles.css

copy

:focus

Si attiva quando un elemento riceve il focus da tastiera (di solito tramite il tasto Tab). Per garantire l'accessibilità, gli stili di hover e focus sono spesso abbinati, offrendo un'esperienza coerente sia agli utenti mouse che tastiera.

La differenza tra :hover e :focus

  • :hover reagisce all'attività del cursore del mouse;
  • :focus reagisce all'attività della tastiera (tasto "Tab").

Nel seguente esempio, abbiamo lo stesso elemento con diverse pseudo-classi. Prestare attenzione al file styles.css. Si può notare che è possibile applicare gli stessi stili per gli effetti hover e focus separando il selettore e la pseudo-classe con ,.

index.html

index.html

styles.css

styles.css

copy

:active

Attivato mentre un elemento viene attivato, comunemente durante un clic del mouse su pulsanti o link.

index.html

index.html

styles.css

styles.css

copy

:visited

Si applica ai link dopo che l’utente ha già visitato la loro destinazione. I browser solitamente visualizzano i link non visitati in blu e quelli visitati in viola, a meno che questi stili non vengano sovrascritti.

index.html

index.html

styles.css

styles.css

copy

1. Quale pseudo-classe viene attivata quando un utente passa il mouse sopra un elemento?

2. Quale pseudo-classe viene applicata a un link che è già stato visitato?

question mark

Quale pseudo-classe viene attivata quando un utente passa il mouse sopra un elemento?

Select the correct answer

question mark

Quale pseudo-classe viene applicata a un link che è già stato visitato?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 6

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

bookMiglioramento degli Stili con le Pseudo-Classi di Azione dell'Utente

Scorri per mostrare il menu

Le pseudo-classi di azione dell'utente consentono di stilizzare gli elementi in base a come gli utenti interagiscono con essi. Sono comunemente applicate agli elementi <button> e <a> per fornire un feedback durante le interazioni.

La sintassi è la seguente:

selector:pseudo-class {
  property: value;
}
  • selector può essere qualsiasi selettore trattato nei capitoli precedenti;
  • pseudo-class richiede : prima della dichiarazione, senza aggiungere spazi.
Note
Nota

Considereremo le pseudo-classi di stato più utili (hover, focus, active e visited).

:hover

Si attiva quando un utente punta un elemento con il cursore del mouse. Ideale per fornire un feedback visivo interattivo.

index.html

index.html

styles.css

styles.css

copy

:focus

Si attiva quando un elemento riceve il focus da tastiera (di solito tramite il tasto Tab). Per garantire l'accessibilità, gli stili di hover e focus sono spesso abbinati, offrendo un'esperienza coerente sia agli utenti mouse che tastiera.

La differenza tra :hover e :focus

  • :hover reagisce all'attività del cursore del mouse;
  • :focus reagisce all'attività della tastiera (tasto "Tab").

Nel seguente esempio, abbiamo lo stesso elemento con diverse pseudo-classi. Prestare attenzione al file styles.css. Si può notare che è possibile applicare gli stessi stili per gli effetti hover e focus separando il selettore e la pseudo-classe con ,.

index.html

index.html

styles.css

styles.css

copy

:active

Attivato mentre un elemento viene attivato, comunemente durante un clic del mouse su pulsanti o link.

index.html

index.html

styles.css

styles.css

copy

:visited

Si applica ai link dopo che l’utente ha già visitato la loro destinazione. I browser solitamente visualizzano i link non visitati in blu e quelli visitati in viola, a meno che questi stili non vengano sovrascritti.

index.html

index.html

styles.css

styles.css

copy

1. Quale pseudo-classe viene attivata quando un utente passa il mouse sopra un elemento?

2. Quale pseudo-classe viene applicata a un link che è già stato visitato?

question mark

Quale pseudo-classe viene attivata quando un utente passa il mouse sopra un elemento?

Select the correct answer

question mark

Quale pseudo-classe viene applicata a un link che è già stato visitato?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 6
some-alt