CSSにおける属性セレクタの詳細
この記事ではCSSにおける属性セレクタの詳細について説明します。
属性セレクタの前方一致や後方一致、部分一致の記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-attribute-selector.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Pseudo Class/Element</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-attribute-selector.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Attribute Selectors</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Attribute Selectors</h2></header>
19 <article>
20 <h3>element[attribute]</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24a[target] {
25 font-weight: bold;
26}
27</pre>
28 <header><h4>HTML</h4></header>
29<pre>
30<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
32</pre>
33 <header><h4>HTML+CSS</h4></header>
34 <section class="sample-view">
35 <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
36 <a href="https://example.com">Example Link (no target)</a>
37 </section>
38 </section>
39 </article>
40 <article>
41 <h3>element[attribute=value] : =</h3>
42 <section>
43 <header><h4>CSS</h4></header>
44<pre class="sample">
45input[type="text"] {
46 border: 2px solid green;
47}
48</pre>
49 <header><h4>HTML</h4></header>
50<pre>
51<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
54</pre>
55 <header><h4>HTML+CSS</h4></header>
56 <section class="sample-view">
57 <input type="text" placeholder="Enter text here">
58 <input type="password" placeholder="Password (no border)">
59 <input type="text" placeholder="Another text input">
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>element[attribute^=value] : ^=</h3>
65 <section>
66 <header><h4>CSS</h4></header>
67<pre class="sample">
68a[href^="https://"] {
69 font-weight: bold;
70}
71</pre>
72 <header><h4>HTML</h4></header>
73<pre>
74<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
77</pre>
78 <header><h4>HTML+CSS</h4></header>
79 <section class="sample-view">
80 <a href="https://example.com">Secure Link (https)</a>
81 <a href="http://example.com">Non-Secure Link (http)</a>
82 <a href="https://another-example.com">Another Secure Link (https)</a>
83 </section>
84 </section>
85 </article>
86 <article>
87 <h3>element[attribute$=value] : $=</h3>
88 <section>
89 <header><h4>CSS</h4></header>
90<pre class="sample">
91img[src$=".jpg"] {
92 border-radius: 10px;
93}
94</pre>
95 <header><h4>HTML</h4></header>
96<pre>
97<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
100</pre>
101 <header><h4>HTML+CSS</h4></header>
102 <section class="sample-view">
103 <img src="image.jpg" alt="JPG Image" width="100">
104 <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105 <img src="example.jpg" alt="Another JPG Image" width="100">
106 </section>
107 </section>
108 </article>
109 <article>
110 <h3>element[attribute*=value] : *=</h3>
111 <section>
112 <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115 background-color: yellow;
116}
117</pre>
118 <header><h4>HTML</h4></header>
119<pre>
120<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
123</pre>
124 <header><h4>HTML+CSS</h4></header>
125 <section class="sample-view">
126 <p class="highlight-text">This paragraph is highlighted.</p>
127 <p class="normal-text">This paragraph is not highlighted.</p>
128 <p class="text-highlight-important">This is another highlighted paragraph.</p>
129 </section>
130 </section>
131 </article>
132 <article>
133 <h3>element[attribute~=value] : ~=</h3>
134 <section>
135 <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138 border: 1px solid red;
139}
140</pre>
141 <header><h4>HTML</h4></header>
142<pre>
143<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
146</pre>
147 <header><h4>HTML+CSS</h4></header>
148 <section class="sample-view">
149 <div class="featured">This div is featured.</div>
150 <div class="content featured">This div is also featured.</div>
151 <div class="content">This div is not featured.</div>
152 </section>
153 </section>
154 </article>
155 <article>
156 <h3>element[attribute|=value] : |=</h3>
157 <section>
158 <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161 font-style: italic;
162}
163</pre>
164 <header><h4>HTML</h4></header>
165<pre>
166<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
169</pre>
170 <header><h4>HTML+CSS</h4></header>
171 <section class="sample-view">
172 <p lang="en">This paragraph is in English.</p>
173 <p lang="en-US">This paragraph is in American English.</p>
174 <p lang="fr">Ce paragraphe est en français.</p>
175 </section>
176 </section>
177 </article>
178
179 <article>
180 <h3>CSS Attribute Selector Example : input[required] & input[placeholder]</h3>
181 <section>
182 <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185 background-color: #ffcccc;
186}
187
188input[placeholder] {
189 font-style: italic;
190 color: #999;
191}
192</pre>
193 <header><h4>HTML</h4></header>
194<pre>
195<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
198</pre>
199 <header><h4>HTML+CSS</h4></header>
200 <section class="sample-view">
201 <input type="text" required placeholder="Enter your name">
202 <input type="email" required placeholder="Enter your email">
203 <input type="text" placeholder="Optional field">
204 </section>
205 </section>
206 </article>
207 <article>
208 <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209 <section>
210 <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213 color: orange;
214}
215
216a[href^="https://"] {
217 color: green;
218}
219</pre>
220 <header><h4>HTML</h4></header>
221<pre>
222<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
225</pre>
226 <header><h4>HTML+CSS</h4></header>
227 <section class="sample-view">
228 <a href="http://example.com">HTTP Link</a>
229 <a href="https://secure.example.com">HTTPS Link</a>
230 <a href="/relative/path">Relative Link</a>
231 </section>
232 </section>
233 </article>
234 <article>
235 <h3>Attribute Selectors</h3>
236 <section>
237 <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240 border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244 opacity: 0.5;
245}
246</pre>
247 <header><h4>HTML</h4></header>
248<pre>
249<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
251</pre>
252 <header><h4>HTML+CSS</h4></header>
253 <section class="sample-view">
254 <img src="pattern.png" alt="PNG Image" width="100">
255 <img src="image.jpg" alt="JPEG Image" width="100">
256 </section>
257 </section>
258 </article>
259
260 </main>
261</body>
262</html>CSSにおける属性セレクタの詳細
CSSの属性セレクタは、特定の属性を持つHTML要素を選択するために使用されます。これにより、属性の値に基づいて要素をスタイルすることが可能です。これから、属性セレクタの基本から高度な使い方まで、ステップバイステップで詳しく解説します。
属性セレクタの種類と構文
属性セレクタには、さまざまな形式があります。ここでは、それぞれのセレクタについて詳しく見ていきます。
属性を持つ要素を選択する
1a[target] {
2 font-weight: bold;
3}- 属性名を記述すると、指定した属性を持つすべての要素を選択します。
- この例では、
target属性を持つすべての<a>要素の文字を太字にします。
特定の属性値を持つ要素を選択する
1input[type="text"] {
2 border: 2px solid green;
3}=を用いると、属性の値が特定の値と完全に一致する要素を選択します。- この例では、
type属性が"text"に設定されているすべての<input>要素に緑色の境界線を適用します。
属性値が部分一致する要素を選択する
次の3つのセレクタを使用すると、属性値の部分一致を指定できます。
- 前方一致 (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- 属性値が指定された文字列で始まる場合に要素を選択します。
- この例では、
href属性が"https://"で始まるすべてのリンクを太字にします。
- 後方一致 (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- 属性値が指定された文字列で終わる場合に要素を選択します。
- この例では、
src属性が.jpgで終わるすべての画像に角を丸くするスタイルを適用します。
- 部分一致 (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- 属性値が指定された文字列を含む場合に要素を選択します。
- この例では、
class属性に"highlight"が含まれるすべての<p>要素に黄色の背景色を適用します。
属性値が空白区切りの単語の中に含まれる要素を選択する (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=は、属性値が空白で区切られた単語の中に特定の単語が含まれる場合に要素を選択します。- この例では、
class属性が"featured"という単語を含むすべての<div>要素に赤色の境界線を適用します。
属性値がハイフンで区切られた値で始まる要素を選択する (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=は、属性値が指定された文字列と一致するか、ハイフンで区切られた値で始まる場合に要素を選択します。主に言語属性 (lang) で使用されます。- この例では、
lang属性が"en"または"en-US"のように"en"で始まるすべての<p>要素に斜体を適用します。
実用的なサンプルと応用例
次に、実用的なシナリオをいくつか見ていきましょう。
フォーム入力フィールドのスタイリング
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- この例では、
required属性を持つすべての入力フィールドに赤みがかった背景色を適用し、placeholder属性を持つ入力フィールドのプレースホルダーテキストに斜体と淡い色を適用しています。
リンクのプロトコルに基づいたスタイル設定
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- ここでは、
http://で始まるリンクをオレンジ色に、https://で始まるリンクを緑色に設定しています。これにより、セキュアなリンクと非セキュアなリンクを視覚的に区別できます。
画像フォーマットに基づくスタイル設定
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- この例では、
.png形式の画像に青色の境界線を付け、.jpg形式の画像の不透明度を50%に設定しています。
まとめ
CSSの属性セレクタは、HTML属性に基づいて要素を選択するための柔軟で強力な方法です。これらのセレクタを使用することで、より具体的なスタイル設定が可能になります。
この記事で説明した基本的な構文と応用例を活用して、より高度なスタイルを簡単に実現してみてください。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。