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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: ':active'
slug: 'Web/CSS/:active'
translation_of: 'Web/CSS/:active'
---
<div>{{CSSRef}}</div>
<div></div>
<div>A pseudo-classe css <strong> :active </strong></div>
<p>Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada ao link, ou seja, {{cssxref(":link")}}, {{cssxref(":hover")}} e {{cssxref(":visited")}}, aparecendo nas regras subseqüentes. Para estilizar apropriadamente os links, você precisa colocar a regra <code>:active </code>depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<div class="note"><strong>Nota:</strong> Em sistemas com mouses com vários botões, o CSS 3 especifica que a pseudo-classe :active só deve ser aplicada ao botão principal em mouses destros, este é tipicamente o botão mais à esquerda.</div>
<h2 id="Example" name="Example">Exemplo</h2>
<div id="example">
<h3 id="HTML">HTML</h3>
<pre class="brush: html; highlight:[3]"><body>
<h1>:active CSS selector example</h1>
<p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
</body></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 }
a:link { color: blue } /* links não visitados */
a:visited { color: purple } /* links visitados */
a:hover { <span class="st">font-weight: bold</span> } /* user hovers */
a:active { color: lime } /* links ativos */</pre>
</div>
<div>{{EmbedLiveSample('example',600,140)}}</div>
<h2 id="Especificações"><span>Especificações</span></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
</div>
</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
</div>
</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
</div>
</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>
<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
<div><span id="ouHighlight__8_17TO0_8">Definição</span><span id="noHighlight_0.9831647105645616"> </span><span id="ouHighlight__0_6TO10_16">inicial</span><span id="noHighlight_0.3416173095780455">.</span></div>
</div>
</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Support on the <code><a></code> element</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>4.0</td>
<td>5.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Support on any element</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>8.0</td>
<td>7.0</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Support on the <code><a></code> element</td>
<td>1.0</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>6.0</td>
<td>6.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Support on any element</td>
<td>1.0</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}} [1]</td>
</tr>
</tbody>
</table>
</div>
<p>[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler on the relevant element or on the {{HTMLElement("body")}}.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
</ul>
|
