Pseudo-classe CSS :active

Definizione e uso

CSS :active Le pseudo-classe sono usate per selezionare e impostare gli stili degli elementi che l'utente sta attivando.

:active Le pseudo-classe sono più spesso usate per <a> e <button> elemento. Quando l'utente clicca sul link, il link viene attivato; è lo stesso per i pulsanti.

Suggerimento:Usa :link Imposta lo stile dei link delle pagine non visitate, usando :visited Imposta lo stile dei link delle pagine visitate, usando :hover Imposta lo stile dei link al mouse sopra.

Attenzione:Nei definizioni CSS,:active Deve essere messo :hover(!Esistente) prima di avere effetto!

Esempio

Esempio 1

Seleziona e imposta gli stili dei link attivati:

a:active {
  background-color: yellow;
}

Prova personalmente

Esempio 2

Seleziona e imposta lo stile del <button> al momento del click dell'utente:

button:active {
  background-color: pink;
}

Prova personalmente

Esempio 3

Seleziona e imposta gli stili per i tag <p>, <h1> e <a> al momento del click:

p:active, h1:active, a:active {
  background-color: yellow;
}

Prova personalmente

Esempio 4

Seleziona e imposta gli stili per i link non visitati, visitati, hover e attivati:

/* Link non visitato */
a:link {
  color: green;
}
/* Link visitato */
a:visited {
  color: green;
}
/* Link con il mouse sopra */
a:hover {
  color: red;
}
/* Link attivato */
a:active {
  color: yellow;
}

Prova personalmente

Esempio 5

Imposta stili diversi per i link:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Prova personalmente

Sintassi CSS

:active {
  dichiarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente la pseudo-classe.

Pagine correlate

Tutorial:CSS Link

Tutorial:CSS Bottone

Tutorial:CSS Pseudo-classe