:active

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

La pseudo-classe CSS :active rappresenta un elemento (come un bottone) che viene attivato dall'utente. Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.

/* Seleziona qualsiasi <a> che viene attivato */
a:active {
  color: red;
}

La pseudo-class :active è comunemente usata su elementi <a> e <button>. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che contengono un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie <label> associate.

Gli stili definiti dalla pseudo-class :active saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link (:link, :hover, o :visited) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola :active dopo tutte le altre regole relative ai link, così come definito dall'ordine LVHA: :link:visited:hover:active.

Nota: Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class :active deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.

Sintassi

:active

Esempi

HTML

<p>Questo paragrafo contiene un link:
  <a href="#">Questo link diventerà rosso quando viene cliccato.</a>
  Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link.
</p>

CSS

a:link { color: blue; }          /* links non visitati  */
a:visited { color: purple; }     /* links visitati  */
a:hover { background: yellow; }  /* links su cui si passa sopra  */
a:active { color: red; }         /* links attivi  */

p:active { background: #eee; }   /* paragrafi attivi */

Risultato

Elementi form attivi

HTML

<form>
  <label for="my-button">Mio bottone: </label>
  <button id="my-button" type="button"> Prova a cliccare su di me o sulla mia label!</button>
</form>

CSS

form:active {
  color: red;
}

form button {
  background: white;
}

Risultato

Specifiche

Specifica Stato Commento
HTML Living Standard
The definition of ':active' in that specification.
Living Standard
Selectors Level 4
The definition of ':active' in that specification.
Working Draft Nessun Cambiamento.
Selectors Level 3
The definition of ':active' in that specification.
Recommendation Nessun Cambiamento.
CSS Level 2 (Revision 1)
The definition of ':active' in that specification.
Recommendation Nessun Cambiamento.
CSS Level 1
The definition of ':active' in that specification.
Recommendation Definizione iniziale.

Compatibilità Browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:activeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Non-a element supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1
Notes
Full support 1
Notes
Notes By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.
Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Vedi anche