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: 擬似クラス
slug: Web/CSS/Pseudo-classes
tags:
- CSS
- Reference
- セレクター
- 擬似クラス
- 概要
- 疑似クラス
translation_of: Web/CSS/Pseudo-classes
---
<div>{{CSSRef}}</div>
<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の<ruby><strong><dfn>擬似クラス</dfn></strong><rp> (</rp><rt>Pseudo-classes</rt><rp>) </rp></ruby>は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。</span>例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。</p>
<pre class="brush: css no-line-numbers">/* ユーザーのポインターが当たっているすべてのボタン */
button:hover {
color: blue;
}</pre>
<p>擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。</p>
<div class="blockIndicator note">
<p><strong>メモ:</strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の<em>特定の部分</em>にスタイルを適用するために使用します。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">selector:pseudo-class {
property: value;
}
</pre>
<p>通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。</p>
<h2 id="Index_of_standard_pseudo-classes" name="Index_of_standard_pseudo-classes">標準擬似クラスの索引</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(":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="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Fullscreen")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td><code>:fullscreen</code> を定義。</td>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>いつ特定のセレクターが HTML 要素に一致するのかを定義。</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td><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> and <code>:where()</code> を定義<br>
<code>:empty</code> の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。<br>
{{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>正規の (WHATWG) HTML 仕様書から関連する節を複写。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Basic UI")}}</td>
<td>{{Spec2("CSS3 Basic UI")}}</td>
<td><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> を定義。ただし意味論的な意味は定義していません。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td><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>, <code>:not()</code> を定義。<br>
<code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, <code>:indeterminate</code> の構文を定義。ただし意味論的な意味は定義していません。<br>
{{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td><code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, <code>:focus</code> を定義。<br>
{{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td><code>:link</code>, <code>:visited</code>, <code>:active</code> を定義。ただし意味論的な意味は定義していません。</td>
</tr>
</tbody>
</table>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a></li>
</ul>
|
