Pseudo-classe CSS :active
Usa la pseudo-classe CSS :active per applicare stili al link attivo. Scopri la pseudo-classe e prova gli esempi.
La pseudo-classe :active si usa per selezionare e applicare stili al link attivo o a qualsiasi altro elemento. Viene attivata dall'utente.
Un elemento diventa attivo quando l'utente clicca sul link o sull'elemento e tiene premuto il pulsante del mouse.
La pseudo-classe :active si usa sugli elementi <a> e <button>. Questa pseudo-classe seleziona anche gli elementi che contengono un elemento attivato e gli elementi di form attivati tramite l'elemento <label>.
Le pseudo-classi :link, :hover o :visited hanno la precedenza sulla definizione specificata dalla pseudo-classe :active. Per applicare correttamente gli stili ai link, la regola :active deve essere posizionata dopo tutte le altre regole relative ai link (:link, :visited, :hover, :active).
Non confondere :active con :focus. Mentre :active si applica durante l'attivazione di un elemento (ad esempio durante un clic del mouse), :focus si applica quando un elemento riceve il focus da tastiera o programmaticamente.
Sui sistemi con mouse a più pulsanti, le specifiche CSS3 stabiliscono che lo stato :active venga attivato dal pulsante di input principale (di solito il pulsante sinistro del mouse).
Versione
Sintassi
Esempio della pseudo-classe CSS :active
:active {
css declarations;
}Esempio della pseudo-classe :active:
Esempio di codice della pseudo-classe CSS :active
<!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>:
Pseudo-classe CSS :active, 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, clicca sul testo per vedere come cambia il colore.
Esempio della pseudo-classe :active con il tag <div>:
Pseudo-classe CSS :active, un 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>