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
|
---
title: Pseudo-classes
slug: Web/CSS/Pseudo-classes
tags:
- CSS
- CSS Referência
- Intermediário
- Seletores
translation_of: Web/CSS/Pseudo-classes
---
<p>{{ CSSRef() }}</p>
<p>Uma <em><strong>pseudo-classe</strong></em> CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, {{Cssxref(":hover")}} pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.</p>
<pre class="brush: css no-line-numbers notranslate">/*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre*/
button:hover {
color: blue;
}</pre>
<p>Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação ({{CSSxRef(":visited")}}, por exemplo), o status do seu conteúdo (como {{ CSSxRef(":checked")}} em certos elementos de um formulário), ou a posição do mouse (como {{CSSxRef(":hover")}}, que permite saber se o mouse está sobre um elemento ou não).</p>
<div class="note">
<p><strong>Observação:</strong> Diferentemente das pseudo-classes, <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elementos</a> podem ser usados para estilizar uma <em>parte específica</em> de um elemento.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox notranslate">seletor:pseudo-classe {
propriedade: valor;
}
</pre>
<p>Assim como nas classes regulares, você pode encadear juntas quantas pseudo-classes você desejar em um seletor.</p>
<h2 id="Índice_de_pseudo-classes_padrão">Índice de pseudo-classes padrão</h2>
<div class="index">
<ul>
<li>{{ Cssxref(":active") }}</li>
<li>{{ Cssxref(":checked") }}</li>
<li>{{ Cssxref(":default") }}</li>
<li>{{ Cssxref(":dir", ":dir()")}}</li>
<li>{{ Cssxref(":disabled") }}</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") }}</li>
<li>{{ Cssxref(":focus") }}</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(":not", ":not()") }}</li>
<li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
<li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</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(":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(":valid") }}</li>
<li>{{ Cssxref(":visited") }}</li>
</ul>
</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('Fullscreen') }}</td>
<td>{{ Spec2('Fullscreen') }}</td>
<td>Define <code>:fullscreen</code>.</td>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>Nenhuma mudança de {{ SpecName('HTML5 W3C') }}.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Define <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, e <code>:matches()</code>.<br>
Nenhuma mudança significante das pseudo-classes definidas em {{SpecName('CSS3 Selectors')}} e {{SpecName('HTML5 W3C')}} (embora o significado semântico que não foram retomadas).</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Define o siginificado semântico no contexto do HTML <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>.<br>
Define <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>, <code>:read-write</code>, e <code>:dir()</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Basic UI') }}</td>
<td>{{ Spec2('CSS3 Basic UI') }}</td>
<td>Define <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>, e <code>:read-write</code>, mas sem associar significado semântico.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Define <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>, e <code>:not()</code>.<br>
Denife a sintaxe de <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>, mas sem o significado semântico associado. Nenhuma mudança significativa, para as pseudo-classes definidas em {{SpecName('CSS2.1')}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Define <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, e <code>:focus</code>.<br>
Nenhuma mudança significativa, para as pseudo-classes definidas em{{SpecName('CSS1')}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS1')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Define <code>:link</code>, <code>:visited</code>, e <code>:active</code>, mas sem o significado semântico associado.</td>
</tr>
</tbody>
</table>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{ Cssxref("pseudo-elements") }}</li>
</ul>
|
