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
166
167
|
---
title: Pseudo-classes
slug: Web/CSS/Pseudo-classes
tags:
- CSS
- Panoramica
- Pseudo-class
- Riferimento
- Selettori
translation_of: Web/CSS/Pseudo-classes
---
<div>{{CSSRef}}</div>
<p class="summary"><span class="seoSummary">Una <strong><dfn>pseudo-classe</dfn></strong> <a href="/it/docs/Web/CSS">CSS</a> è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati.</span> Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.</p>
<pre class="brush: css no-line-numbers">/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
button:hover {
color: blue;
}</pre>
<p>La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione ({{CSSxRef(":visited")}}, per esempio), lo stato del suo contenuto (come {{CSSxRef(":checked")}} su determinati elementi di form), oppure la posizione del mouse (come {{CSSxRef(":hover")}}), il quale permette di sapere se il mouse si trova su un elemento o no.</p>
<div class="blockIndicator note">
<p><strong>Nota:</strong> Al contrario delle pseudo-classi, gli <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi</a> possono essere usati per dare stile a <em>parti specifiche</em> di un elemento.</p>
</div>
<h2 id="Sintassi">Sintassi</h2>
<pre class="syntaxbox">selector:pseudo-class {
property: value;
}
</pre>
<p>Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.</p>
<h2 id="Indice_delle_pseudo-classi_standard">Indice delle pseudo-classi standard</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")}} {{Experimental_Inline}}</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(":is", ":is()")}} {{Experimental_Inline}}</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(":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(":state", ":state()")}} {{Experimental_Inline}}</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>
<li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Status</th>
<th scope="col">Commento</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Fullscreen")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td>Definito <code>:fullscreen</code>.</td>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Definisce quando particolari selettori corrisponde ad elementi HTML.</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Definiti <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>, <code>:is()</code> e <code>:where()</code>.<br>
Cambiato il comportamento di <code>:empty</code> {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br>
Nessun cambiamento significativo per le altre pseudo-classi definite nel {{SpecName("CSS3 Selectors")}} e {{SpecName("HTML5 W3C")}} (sebbene il significato semantico non sia stato preso in considerazione).</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Basic UI")}}</td>
<td>{{Spec2("CSS3 Basic UI")}}</td>
<td>Definiti <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>, ma senza l'associazione di significato semantico.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Definiti <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>
Definita la sintassi di <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>, ma senza l'associazione di significato semantico.<br>
Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Definiti <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, e <code>:focus</code>.<br>
Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Definiti <code>:link</code>, <code>:visited</code> e <code>:active</code>, ma senza l'associazione di significato semantico.</td>
</tr>
</tbody>
</table>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></li>
</ul>
|
