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
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
title: 属性セレクター
slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
tags:
- Attribute
- Beginner
- CSS
- Learn
- Selectors
translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<p>HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、 HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>属性セレクターとは何かと、その使い方を学ぶ。</td>
</tr>
</tbody>
</table>
<h2 id="Presence_and_value_selectors" name="Presence_and_value_selectors">存在や値のセレクター</h2>
<p>これらのセレクターにより、要素を属性が存在するか (<code>href</code> など)、または属性の値に対して様々な方法で一致させて選択できるようになります。</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">セレクター</th>
<th scope="col">例</th>
<th scope="col">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>]</code></td>
<td><code>a[title]</code></td>
<td><em>attr</em> という属性名を持つ要素と一致します。 — 値を角括弧の中に入れます。</td>
</tr>
<tr>
<td><code>[<em>attr</em>=<em>value</em>]</code></td>
<td><code>a[href="https://example.com"]</code></td>
<td><em>attr</em> という属性名で値が <em>value</em> と完全一致する要素と一致します。— 文字列は引用符の中に入れます。</td>
</tr>
<tr>
<td><code>[<em>attr</em>~=<em>value</em>]</code></td>
<td><code>p[class~="special"]</code></td>
<td>
<div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">値が正確に <em>value </em>である <em>attr </em>の属性名を持つ要素、または1つ以上の値を含む <em>attr </em>属性を持つ要素に一致します。</div>
<div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values."></div>
<div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">複数の値のリストでは、個別の値が空白で区切られていることに注意してください。</div>
</td>
</tr>
<tr>
<td><code>[<em>attr</em>|=<em>value</em>]</code></td>
<td><code>div[lang|="zh"]</code></td>
<td>値が正確に <em>value </em>であるか、または <em>value </em>の直後にハイフンが続く値で始まる <em>attr</em> 属性を持つ要素にマッチします。</td>
</tr>
</tbody>
</table>
<p>以下の例では、これらのセレクタが使用されていることがわかります。</p>
<ul>
<li><code>li[class]</code> を使用することで、クラス属性を持つ任意のセレクタにマッチさせることができます。これは、最初のものを除いたすべてのリスト項目にマッチします。</li>
<li><code>li[class="a"]</code> は、aのクラスを持つセレクタにはマッチしますが、別のスペースで区切られたクラスを値の一部として持つaのクラスを持つセレクタにはマッチしません。2番目のリスト項目を選択します。</li>
<li><code>li[class~="a"]</code>は、 <code>a</code> のクラスを持つセレクタにマッチしますが、空白で区切られたリストの一部に <code>a</code> のクラスを含む値にもマッチします。2 番目と 3 番目のリスト項目を選択します。</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
<h2 id="Substring_matching_selectors" name="Substring_matching_selectors">部分文字列一致セレクター</h2>
<p>これらのセレクタは、属性の値の中の部分文字列をより高度にマッチさせることができます。例えば、 <code>box-warning</code> と <code>box-error</code> のクラスがあり、文字列 "box-" で始まるものを全てマッチさせたい場合、 <code>[class^="box-"]</code> を使用して両方を選択することができます。</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">セレクター</th>
<th scope="col">例</th>
<th scope="col">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>^=<em>value</em>]</code></td>
<td><code>li[class^="box-"]</code></td>
<td>値が <code>value</code> で始まる <code>attr</code> 属性（名前は角括弧内の値）を持つ要素とマッチします。</td>
</tr>
<tr>
<td><code>[<em>attr</em>$=<em>value</em>]</code></td>
<td><code>li[class$="-box"]</code></td>
<td>
<div title="Matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value.">値が <code>value</code> で終わる <code>attr</code> 属性を持つ要素にマッチします。</div>
</td>
</tr>
<tr>
<td><code>[<em>attr</em>*=<em>value</em>]</code></td>
<td><code>li[class*="box"]</code></td>
<td>文字列内の任意の場所に <code>value</code> を含む attr 属性を持つ要素にマッチします。</td>
</tr>
</tbody>
</table>
<p>次の例は、これらのセレクタの使用法を示しています。</p>
<ul>
<li><code>li[class^="a"]</code> は <code>a</code> で始まる属性値にマッチするので、最初の 2 つのリスト項目にマッチします。</li>
<li><code>li[class$="a"]</code> は <code>a</code> で終わる属性値にマッチするので、最初と3番目のリスト項目にマッチします。</li>
<li><code>li[class*="a"]</code>は、<code>a</code> が文字列のどこかに現れる属性値にマッチします。</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
<h2 id="Case-sensitivity" name="Case-sensitivity">大文字・小文字の区別</h2>
<p>属性値を大文字小文字を区別せずにマッチさせたい場合は、閉じ括弧の前に値 <code>i</code> を使うことができます。このフラグは、ブラウザにASCII文字を大文字小文字を区別せずにマッチさせるように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従ってマッチされます - HTMLの場合は大文字小文字を区別します。</p>
<p>以下の例では、最初のセレクタは <code>a</code> で始まる値にマッチします。他の 2 つのリスト項目は大文字の A で始まるため、最初のリスト項目にのみマッチします。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p><strong>注</strong>：新しい値 <code>s</code> もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別するマッチングを強制しますが、これはブラウザではあまりサポートされておらず、HTMLコンテキストではあまり役に立ちません。</p>
</div>
<h2 id="Try_it_out" name="Try_it_out">やってみよう</h2>
<p>下のライブの例では、属性セレクタを使ったCSSを追加して以下のようにします。</p>
<ul>
<li><code>title</code> 属性を持つ <code><a></code> 要素をターゲットにして、ボーダーをピンク（<code>border-color: pink</code>）にする。</li>
<li><code><a></code> 要素の <code>href</code> 属性の値のどこかに <code>contact</code> という単語が含まれているものをターゲットにして、ボーダーをオレンジ色にする (<code>border-color: orange</code>)。</li>
<li><code>href</code> 属性の値が <code>https</code> で始まる <code><a></code> 要素を対象とし、ボーダーを緑色(<code>border-color: green</code>)にする。</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで解答を見ることができます</a>が、まずは自分で考えてみてください。</p>
</div>
<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
<p>これで属性セレクターが完了しました。次の記事に進んで、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-class and pseudo-element selectors</a>について読むことができます。</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
<ol>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
<ul>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
</ul>
</li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
</ol>
|
