CSS の属性セレクターは、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。
/* title 属性を持つ <a> 要素 */ a[title] { color: purple; } /* href が "https://example.org" と一致する <a> 要素 */ a[href="https://example.org"] { color: green; } /* href に "example" を含む <a> 要素 */ a[href*="example"] { font-size: 2em; } /* href が "org" で終わる <a> 要素 */ a[href$=".org"] { font-style: italic; }
構文
[attr]
- attr という名前の属性を持つ要素を表します。
[attr=value]
- attr という名前の属性の値が正確に value である要素を表します。
[attr~=value]
- attr という名前の属性の値が正確に value と一致する要素を表します。空白区切りの語のリストの形で、複数の value を含めることができます。
[attr|=value]
- attr という名前の属性の値が正確に value と一致するか、 value で始まり直後にハイフン (
-
(U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。 [attr^=value]
- attr という名前の属性の値が value で始まる要素を表します。
[attr$=value]
- attr という名前の属性の値が value で終わる要素を表します。
[attr*=value]
- attr という名前の属性の値が、文字列中に value を1つ以上含む要素を表します。
[attr operator value i]
- 閉じ角括弧の前に
i
(またはI
) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。 [attr operator value s]
- 閉じ角括弧の前に
s
(またはS
) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。
例
リンク
CSS
a { color: blue; } /* "#" で始まる内部リンク */ a[href^="#"] { background-color: gold; } /* URL のどこかに "example" が含まれるリンク */ a[href*="example"] { background-color: silver; } /* URL のどこかに "insensitive" が含まれるリンクで、 大文字小文字は区別しない */ a[href*="insensitive" i] { color: cyan; } /* URL のどこかに "cAsE" があるリンクに一致 大文字小文字の区別つき */ a[href*="cAsE" s] { color: pink; } /* ".org" で終わるリンク */ a[href$=".org"] { color: red; }
HTML
<ul> <li><a href="#internal">Internal link</a></li> <li><a href="http://example.com">Example link</a></li> <li><a href="#InSensitive">Insensitive internal link</a></li> <li><a href="http://example.org">Example org link</a></li> </ul>
結果
言語
CSS
/* `lang` 属性があるすべての div を太字にする。 */ div[lang] { font-weight: bold; } /* アメリカ英語の div はすべて青。 */ div[lang~="en-us"] { color: blue; } /* ポルトガル語の div はすべて緑。 */ div[lang="pt"] { color: green; } /* 中国語の div はすべて赤。 simplified (zh-CN) or traditional (zh-TW). */ div[lang|="zh"] { color: red; } /* 'data-lang' が中国語繁体字の div はすべて紫。 */ /* 注: ハイフン区切りの属性は二重引用符なしで without double quotes */ div[data-lang="zh-TW"] { color: purple; }
HTML
<div lang="en-us en-gb en-au en-nz">Hello World!</div> <div lang="pt">Olá Mundo!</div> <div lang="zh-CN">世界您好!</div> <div lang="zh-TW">世界您好!</div> <div data-lang="zh-TW">世界您好!</div>
結果
HTML 順序付きリスト
HTML 仕様書では、 type
属性は主に <input>
要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト (<ol>
) 要素の type
属性に使おうとすると、 case-sensitive 修飾子がなければ正しく動作しません。
CSS
/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="A" s] { list-style-type: upper-alpha; background: lime; }
HTML
<ol type="A"> <li>Example list</li> </ol>
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 attribute selectors の定義 |
草案 | ASCII の大文字小文字を区別する選択、区別しない選択のための修飾子を追加 |
Selectors Level 3 attribute selectors の定義 |
勧告 | |
CSS Level 2 (Revision 1) attribute selectors の定義 |
勧告 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 7 | Opera 完全対応 9 | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
Case-insensitive modifier (i ) | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 47 | IE 未対応 なし | Opera 完全対応 36 | Safari 完全対応 9 | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Edge Mobile 未対応 なし | Firefox Android 完全対応 47 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 5.0 |
Case-sensitive modifier (s ) | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 66 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 完全対応 66 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
関連情報
attr
- 単一要素の選択:
Document.querySelector()
,DocumentFragment.querySelector()
,Element.querySelector()
- 一致するすべての要素の選択:
Document.querySelectorAll()
,DocumentFragment.querySelectorAll()
,Element.querySelectorAll()
- 上記のメソッドはすべて
ParentNode
に混在して実装されています。ParentNode.querySelector()
およびParentNode.querySelectorAll()
を参照してください