属性セレクター

ジャンプ先:
  1. 例
  2. 仕様書
  3. ブラウザーの対応
  4. 関連情報

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 という名前の属性の値が空白区切りの語のリストで、その中の1つが正確に 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 の範囲内の文字の場合）値は大文字と小文字を区別せずに比較されます。

例

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;
}

/* ".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 はすべて赤。
   簡体字 (zh-CN) も繁体字 (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>

結果

仕様書

仕様書 状態 備考
Selectors Level 4
attribute selectors の定義		 草案 ASCII の大文字小文字を区別しない選択を追加。
Selectors Level 3
attribute selectors の定義		 勧告  
CSS Level 2 (Revision 1)
attribute selectors の定義		 勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7Opera 完全対応 9Safari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Case-insensitive modifier (i)Chrome 完全対応 49Edge 未対応 なしFirefox 完全対応 47IE 未対応 なしOpera 完全対応 36Safari 完全対応 9WebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 未対応 なしFirefox Android 完全対応 47Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, momdo, ethertank, sii
最終更新者: mfuji09,