blob: e4f2a8b611044349057f607d15e09938cd12ba54 (
plain)
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
|
---
title: 擬似要素
slug: Web/CSS/Pseudo-elements
tags:
- CSS
- ガイド
- 概要
- 擬似要素
- リファレンス
- セレクター
translation_of: Web/CSS/Pseudo-elements
---
{{CSSRef}}
CSS の **擬似要素** (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。
```css
/* すべての <p> 要素の最初の行です。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
```
> **Note:** 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の<em>状態</em>に基づいてスタイル付けを行うことができます。
## 構文
```css
selector::pseudo-element {
property: value;
}
```
擬似要素は 1 つのセレクターに 1 つだけ使用することができます。文内の単純セレクターの後に置く必要があります。
> **Note:** ルールとして、単一コロン (`:`) の代わりに二重コロン (`::`) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の構文に対応しています。
## 索引
CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。
A
- {{CSSxRef("::after", "::after (:after)")}}
B
- {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
- {{CSSxRef("::before", "::before (:before)")}}
C
- {{CSSxRef("::cue")}}
- {{CSSxRef("::cue-region")}}
F
- {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
- {{CSSxRef("::first-line", "::first-line (:first-line)")}}
- {{CSSxRef("::file-selector-button")}}
G
- {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
M
- {{CSSxRef("::marker")}} {{Experimental_Inline}}
P
- {{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}
- {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
S
- {{CSSxRef("::selection")}}
- {{CSSxRef("::slotted", "::slotted()")}}
- {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
T
- {{CSSxRef("::target-text")}} {{Experimental_Inline}}
## 仕様書
| 仕様書 | 状態 | 備考 |
| -------------------- | ----------------- | ---------------------------- |
| {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | 擬似クラスと擬似要素を定義。 |
## ブラウザーの互換性
<table class="standard-table">
<tbody>
<tr>
<th>ブラウザー</th>
<th>対応開始バージョン</th>
<th>対応内容</th>
</tr>
<tr>
<td rowspan="2">Internet Explorer</td>
<td>8.0</td>
<td><code>:pseudo-element</code></td>
</tr>
<tr>
<td>9.0</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
<tr>
<td rowspan="2">Firefox (Gecko)</td>
<td>1.0 (1.0)</td>
<td><code>:pseudo-element</code></td>
</tr>
<tr>
<td>1.0 (1.5)</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
<tr>
<td rowspan="2">Opera</td>
<td>4.0</td>
<td><code>:pseudo-element</code></td>
</tr>
<tr>
<td>7.0</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
<tr>
<td>Safari (WebKit)</td>
<td>1.0 (85)</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
</tbody>
</table>
## 関連情報
- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)
|
