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
160
|
---
title: ':active'
slug: 'Web/CSS/:active'
tags:
- pseudo klasa
translation_of: 'Web/CSS/:active'
---
<div>{{CSSRef}}</div>
<h2 id="Pseudo_klasaactive">Pseudo klasa:active</h2>
<p><code>Właściwość :active</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><code>jest używany w momencie aktywowania danego elementu przez użytkownika. Podczas interakcji z myszą zazwyczaj jest to czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go.</code> Pseudo klasa <code>:active jest często używna z elementami HTML jak</code> {{HTMLElement("a")}} lub {{HTMLElement("button")}} ale nie tylko.</p>
<p>Pseudo klasa :active może zostać zastąpiona przez inne pseudo-klasy powiązane z linkami, takie jak {{cssxref (": link")}}, {{cssxref (": hover")}} i {cssxref (": visited" )}}, które mogą się pojawić w kolejnych regułach. W celu dopasowania odpowiednich linków, należy umieścić: active we wszystkich innych regułach linków, zgodnie z definicją zlecenia LVHA:: link -: visited -: hover -: active.</p>
<div class="note"><strong>Notatka:</strong> W systemach z wieloma przyciskami, CSS 3 określa pseudo klasę <code>:active</code> dla przycisku podstawowego.</div>
<h2 id="Składnia">Składnia</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Example" name="Example">Przykład</h2>
<div id="example">
<h3 id="HTML">HTML</h3>
<pre class="brush: html; highlight:[3]"><body>
<h1>:active przykład selektora CSS</h1>
<p>Ten link zmieni się w czasie kliknięcia i zwolnienia<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 } /* unvisited links */
a:visited { color: purple } /* visited links */
a:hover { <span class="st">font-weight: bold</span> } /* user hovers */
a:active { color: lime } /* active links */</pre>
</div>
<div>{{EmbedLiveSample('example',600,140)}}</div>
<h2 id="Specyfikacja"><span>Specyfikacja</span></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>4.0</td>
<td>5.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Support on non-<code><a></code> elements</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>8.0</td>
<td>7.0</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>6.0</td>
<td>6.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Support on non-<code><a></code> elements</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}} [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="Zobacz_też">Zobacz też</h2>
<ul>
<li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
</ul>
|
