1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: ':active'
slug: 'Web/CSS/:active'
tags:
- CSS
- Layout
- Pseudo-class
- Web
translation_of: 'Web/CSS/:active'
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:active</code></strong> rappresenta un elemento (come un bottone) che viene attivato dall'utente.</span> Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.</p>
<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi <a> che viene attivato */
a:active {
color: red;
}</pre>
<p>La pseudo-class <code>:active</code> è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che <em>contengono</em> un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.</p>
<p>Gli stili definiti dalla pseudo-class <code>:active</code> saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola <code>:active</code> dopo tutte le altre regole relative ai link, così come definito dall'ordine <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<div class="note"><strong>Nota:</strong> Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class <code>:active</code> deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.</div>
<h2 id="Sintassi">Sintassi</h2>
{{csssyntax}}
<h2 id="Esempi">Esempi</h2>
<h3 id="Link_attivi">Link attivi</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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 */</pre>
<h4 id="Risultato">Risultato</h4>
<p>{{EmbedLiveSample('Active_links')}}</p>
<h3 id="Elementi_form_attivi">Elementi form attivi</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">form:active {
color: red;
}
form button {
background: white;
}</pre>
<h4 id="Risultato_2">Risultato</h4>
<p>{{EmbedLiveSample('Active_form_elements')}}</p>
<h2 id="Specifiche"><span>Specifiche</span></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Stato</th>
<th scope="col">Commento</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Nessun Cambiamento.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Nessun Cambiamento.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Nessun Cambiamento.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definizione iniziale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
<div>
<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div>
<p>{{Compat("css.selectors.active")}}</p>
</div>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li>
</ul>
|
