CSS の 属性セレクター ( attribute selector ) は、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。

/* 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 はすべて紫。 */ /* 注: ハイフン区切りの属性は二重引用符なしで使用できる */ 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>

結果

仕様書

ブラウザーの対応

Update compatibility data on GitHub デスクトップ モバイル Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android 版 Chrome Android 版 Firefox Android 版 Opera iOSのSafari Samsung Internet Attribute selector ( [attr=value] ) Chrome 完全対応 1 Edge 完全対応 12 Firefox 完全対応 1 IE 完全対応 7 Opera 完全対応 9 Safari 完全対応 3 WebView Android 完全対応 ≤37 Chrome Android 完全対応 18 Firefox Android 完全対応 4 Opera Android 完全対応 14 Safari iOS 完全対応 1 Samsung Internet Android 完全対応 1.0 Case-insensitive modifier ( i ) Chrome 完全対応 49 Edge 完全対応 79 Firefox 完全対応 47 IE 未対応 なし Opera 完全対応 36 Safari 完全対応 9 WebView Android 完全対応 49 Chrome Android 完全対応 49 Firefox Android 完全対応 47 Opera Android 完全対応 36 Safari iOS 完全対応 9 Samsung Internet Android 完全対応 5.0 Case-sensitive modifier ( s ) Chrome 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. Edge 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. Firefox 完全対応 66 IE 未対応 なし Opera 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. Safari 未対応 なし WebView Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. Chrome Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. Firefox Android 完全対応 66 Opera Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. Safari iOS 未対応 なし Samsung Internet Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1041095. 凡例 完全対応 完全対応 未対応 未対応 実装ノートを参照してください。 実装ノートを参照してください。

関連情報