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 の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121793
Case-insensitive modifier (i)49 なし47 なし369
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
Case-insensitive modifier (i)4949 なし47 あり あり5.0

関連情報

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

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