Come attivare gli elementi in CSS grazie a :active

0 Commenti

La pseudo classe :active viene utilizzata per rappresentare un elemento attivo nella pagina, di solito quando l'utente clicca su un bottone o su un link.

    /* Attiva un elemento <a> */
    a:active {
      color: #E50914;
    }

La pseudo classe :active viene solitamente utilizzata per gli elementi <a> e <button>, ma può essere usata anche su elementi che contengono un elemento attivo o neii form attivati attraverso la loro <label>.

Gli stili definiti dalla pseudo classe :active, vengono sovrascritti da una qualsiasi pseudo classe con almeno le stesse specifiche (:link, :hover o :visited). Per poter apporre correttamente gli stili, mettete la regola :active dopo tutte le altre regole.

Potete seguire l'ordine LVHA

:link - :visited - :hover - :active.

Esempio

Compatibilità browser

Desktop

  • Chrome 1
  • Edge 12
  • Firefox 1
  • Internet Explorer 4 (Supporto elementi non -a dalla 8)
  • Opera 5 (Supporto elementi non -a dalla 7)
  • Safari 1

Mobile

  • Android webview 1
  • Chrome per Android 18
  • Firefox per Android 4
  • Opera per Android 10.1 (Supporto elementi non -a ?)
  • Safari per iOS 1 (Supportato anche se iOS non usa :active finché non c'è un evento touchstart sull'elemento o nel body dell'elemento)
  • Samsung Internet ?

Jacopo Kahl

Ciao mi chiamo Jacopo. Benvenuto/a sul mio sito web. Sono un appassionato del mondo delle nuove tecnologie e mi occupo di UX/UI e sviluppo Front-End.

Commenti