CSS :active Pseudo Class
Usa la pseudo-classe CSS :active per stilizzare i link attivi. Scopri la pseudo-classe con esempi pratici.
La pseudo-classe CSS :active seleziona e stilizza un elemento mentre viene attivato dall'utente — il più delle volte il breve istante tra la pressione del tasto del mouse su un link o un pulsante e il suo rilascio. Questa pagina spiega come funziona :active, perché l'ordine delle regole per i link è importante e mostra esempi eseguibili per link, pulsanti e altri elementi.
Un elemento diventa attivo quando l'utente preme il tasto principale del mouse su di esso (e rimane attivo finché il tasto non viene rilasciato). Su schermi touch si applica mentre l'elemento è toccato.
:active viene usato più spesso sugli elementi <a> e <button>, ma può selezionare qualsiasi elemento. Corrisponde anche a un elemento che contiene un elemento attivato, e ai controlli di form attivati tramite la loro <label>.
Perché l'ordine delle regole è importante
Le pseudo-classi :link, :visited e :hover possono sovrascrivere gli stili impostati da :active a causa di come la cascade risolve le regole con specificità uguale — vince l'ultima regola corrispondente. Per rendere visibile lo stato attivo, elenca le regole relative ai link nel seguente ordine esatto (ricordalo come LVHA):
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover { color: #2980b9; } /* mouse over */
a:active { color: #8ebf42; } /* being clicked */Posiziona :active dopo :link, :visited e :hover, altrimenti le regole precedenti lo mascherebbero.
Do not confuse :active with :focus. While :active applies while an element is being activated (e.g., during a mouse click), :focus applies when an element receives keyboard or programmatic focus.
On systems with multi-button mice, CSS3 specifies that the :active state is triggered by the primary input button (typically the left mouse button).
Versione
Sintassi
Esempio di CSS :active Pseudo Class
:active {
css declarations;
}Esempio della pseudo-classe :active:
Esempio di codice CSS :active Pseudo Class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:active {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<a href="https://www.w3docs.com/">w3docs.com</a>
</body>
</html>Esempio della pseudo-classe :active con il tag <a>:
CSS :active Pseudo Class, esempio di codice 2
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:active {
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Nell'esempio seguente, fai clic sul testo per vedere come cambia il colore.
Esempio della pseudo-classe :active con il tag <div>:
CSS :active Pseudo Class, altro esempio di codice
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:active {
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Esempio di :active su un <button>:
Combinare :active con :hover e :focus è un modo comune per dare ai pulsanti un set completo di stati interattivi. La regola :active qui sotto conferisce al pulsante un aspetto "premuto" mentre il tasto del mouse è tenuto premuto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #1c87c9;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #156a9e;
transform: translateY(2px);
}
</style>
</head>
<body>
<h2>:active on a button</h2>
<button>Press me</button>
</body>
</html>Cose da tenere a mente
:activevs:focus.:activedura solo mentre l'elemento è premuto;:focusrimane attivo finché l'elemento mantiene il focus da tastiera o programmatico. Usa:focus(o:focus-visible) per l'accessibilità da tastiera — non fare mai affidamento su:activeda solo, perché è irraggiungibile dagli utenti che usano solo la tastiera.- Non rimuovere tutto il feedback visivo. Stilizzare insieme
:active,:hovere:focusaiuta gli utenti a capire che un elemento è interattivo. - Anche la specificità conta. L'ordine delle regole risolve solo i pareggi tra selettori di specificità uguale. Un selettore più specifico altrove può comunque avere la precedenza, quindi mantieni le regole per i link allo stesso livello di specificità.