CSS ・ CSSの記法
[attr]
属性の値で指定する（含む・始まる・終わる）
class や href などの属性の値で要素を選ぶセレクタです。「〜を含む」「〜で始まる」「〜で終わる」のように、値の一部で指定することもできます。
01
サンプルコード
HTML
1<p class="acthouse-title">acthouse-title</p>
2<p class="box-acthouse-content">box-acthouse-content</p>
3<p class="lead-acthouse">lead-acthouse</p>
CSS
1/* acthouse を含む → 3つすべて */
2[class*="acthouse"] {
3 padding-left: 8px;
4 border-left: 4px solid #b68235;
5}
6/* acthouse- で始まる → 1つ目だけ */
7[class^="acthouse-"] {
8 color: #2e7d5b;
9}
10/* -acthouse で終わる → 3つ目だけ */
11[class$="-acthouse"] {
12 color: #1f5fa8;
13}
02
実行結果
ブラウザでの表示左の線は3つすべて、緑は「acthouse- で始まる」1つ目、青は「-acthouse で終わる」3つ目だけに付いています
03
解説
属性セレクタは [属性名] や [属性名="値"] のように、角かっこ（[ ]）の中に属性を書いて要素を選びます。クラスに限らず、href・type・data-* など、どの属性にも使えます。
= の前に記号を付けると、値の一部で指定できます。*= は「〜を含む」、^= は「〜で始まる」、$= は「〜で終わる」です。似た名前のクラスをまとめて指定したいときに便利で、講義では「ワイルドカード（正規表現）」として紹介されています（実際の正規表現とは別のもので、使えるのはこの3つの記号などに限られます）。
比べられるのは属性の値の文字列全体です。class="title acthouse-lead" のようにクラスが複数あると、文字列の先頭は title なので [class^="acthouse-"] には一致しません。
詳細度はクラスセレクタと同じ（0-1-0）です。
04
応用例・注意点
書き方
| 書き方 | 説明 |
|---|---|
[attr] | その属性を持つ要素（値は問わない） |
[attr="値"] | 値が完全に一致する |
[attr*="値"] | 値を含む |
[attr^="値"] | 値で始まる |
[attr$="値"] | 値で終わる |
[attr~="値"] | 空白で区切った単語のどれかが一致する |
[attr="値" i] | 大文字・小文字を区別しない |
外部リンクとPDFに印を付ける
href の始まりや終わりで、リンクの種類を見分けられます。
CSS
1a[href^="http"]::after {
2 content: " ↗";
3}
4a[href$=".pdf"]::after {
5 content: "（PDF）";
6}
入力欄の種類ごとに指定する
type 属性の値で、input の種類ごとにスタイルを分けられます。
CSS
1input[type="text"],
2input[type="email"] {
3 width: 100%;
4 padding: 8px;
5}
6input[type="checkbox"] {
7 width: 18px;
8 height: 18px;
9}
注意点
- 01値は " " で囲みます。英数字とハイフンだけなら省略もできますが、囲んでおくほうが確実です。
- 02クラスを1つ付ければ済む場面では、クラスセレクタのほうが読みやすくなります。部分一致は、名前の規則が決まっているクラスや、自分でクラスを付けられない要素に使います。