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
161
162
163
164
165
|
---
title: Pseudoclasses
slug: Web/CSS/Pseudoclasses
tags:
- CSS
- Pseudoclasse
- Referencia
- Resumo
- Seletores
- Sinopse
translation_of: Web/CSS/Pseudo-classes
---
<div>{{CSSRef}}</div>
<p>A <a href="/pt-PT/docs/Web/CSS">CSS</a> <strong><dfn>pseudo-class</dfn></strong> is a keyword added to a selector that specifies a special state of the selected element(s). For example, {{CSSxRef(":hover")}} can be used to change a button's color when the user's pointer hovers over it.</p>
<pre class="brush: css; no-line-numbers">/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}</pre>
<p>Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{CSSxRef(":visited")}}, for example), the status of its content (like {{CSSxRef(":checked")}} on certain form elements), or the position of the mouse (like {{CSSxRef(":hover")}}, which lets you know if the mouse is over an element or not).</p>
<div class="blockIndicator note">
<p><strong>Nota:</strong> In contrast to pseudo-classes, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a> can be used to style a <em>specific part</em> of an element.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">selector:pseudo-class {
property: value;
}
</pre>
<p>Like regular classes, you can chain together as many pseudo-classes as you want in a selector.</p>
<h2 id="Índice_de_pseudoclasses_padrões">Índice de pseudoclasses padrões</h2>
<div class="index" id="index">
<ul>
<li>{{CSSxRef(":active")}}</li>
<li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":checked")}}</li>
<li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":default")}}</li>
<li>{{CSSxRef(":defined")}}</li>
<li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":disabled")}}</li>
<li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":empty")}}</li>
<li>{{CSSxRef(":enabled")}}</li>
<li>{{CSSxRef(":first")}}</li>
<li>{{CSSxRef(":first-child")}}</li>
<li>{{CSSxRef(":first-of-type")}}</li>
<li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":focus")}}</li>
<li>{{CSSxRef(":focus-visible")}}</li>
<li>{{CSSxRef(":focus-within")}}</li>
<li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":host")}}</li>
<li>{{CSSxRef(":host()")}}</li>
<li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":hover")}}</li>
<li>{{CSSxRef(":indeterminate")}}</li>
<li>{{CSSxRef(":in-range")}}</li>
<li>{{CSSxRef(":invalid")}}</li>
<li>{{CSSxRef(":lang", ":lang()")}}</li>
<li>{{CSSxRef(":last-child")}}</li>
<li>{{CSSxRef(":last-of-type")}}</li>
<li>{{CSSxRef(":left")}}</li>
<li>{{CSSxRef(":link")}}</li>
<li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":matches", ":matches()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":not", ":not()")}}</li>
<li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
<li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
<li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
<li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
<li>{{CSSxRef(":only-child")}}</li>
<li>{{CSSxRef(":only-of-type")}}</li>
<li>{{CSSxRef(":optional")}}</li>
<li>{{CSSxRef(":out-of-range")}}</li>
<li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":read-only")}}</li>
<li>{{CSSxRef(":read-write")}}</li>
<li>{{CSSxRef(":required")}}</li>
<li>{{CSSxRef(":right")}}</li>
<li>{{CSSxRef(":root")}}</li>
<li>{{CSSxRef(":scope")}}</li>
<li>{{CSSxRef(":target")}}</li>
<li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":valid")}}</li>
<li>{{CSSxRef(":visited")}}</li>
</ul>
</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Fullscreen")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td>Defined <code>:fullscreen</code>.</td>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Defines when particular selectors match HTML elements.</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Defined <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code> and <code>:matches()</code>.<br>
No significant change for pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Copies the relevant section from the canonical (WHATWG) HTML spec.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Basic UI")}}</td>
<td>{{Spec2("CSS3 Basic UI")}}</td>
<td>Defined <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, but without the associated semantic meaning.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Defined <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> and <code>:not()</code>.<br>
Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>, but without the associated semantic meaning.<br>
No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Defined <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, and <code>:focus</code>.<br>
No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Defined <code>:link</code>, <code>:visited</code> and <code>:active</code>, but without the associated semantic meaning.</td>
</tr>
</tbody>
</table>
<h2 id="Consultar_também">Consultar também:</h2>
<ul>
<li><a href="/pt-PT/docs/Web/CSS/Pseudoelementos">Pseudoelementos</a></li>
</ul>
|
