属性セレクターは要素の属性およびその値に基づいてマッチする特殊なセレクターです。その一般的な文法は、属性の名前と、その値にマッチするオプションの条件を囲む角括弧 ([]) で構成されます。属性セレクターは属性の値にマッチする方法によって、2 つのカテゴリーに分けられます。存在および完全一致属性セレクターと部分一致属性セレクターです。

存在および完全一致属性セレクター

これらの属性セレクターは完全な属性の値とのマッチングを試みます。

  • [attr] : このセレクターは attr 属性をもつすべての要素を、その値に関わらず選択します。
  • [attr=val] : このセレクターは attr 属性をもち、その値が val であるすべての要素を選択します。
  • [attr~=val]: このセレクターは attr 属性をもち、attr の値をスペースで区切った単語のリストに val が含まれるすべての要素を選択します。

以下の HTML コード片を強調する例を見ましょう。

<i lang="fr-FR">バスク風チキン</i>の材料
<ul>
  <li data-quantity="1kg" data-vegetable>トマト</li>
  <li data-quantity="3" data-vegetable>玉ねぎ</li>
  <li data-quantity="3" data-vegetable>ニンニク</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">唐辛子</li>
  <li data-quantity="2kg" data-meat>鶏肉</li>
  <li data-quantity="optional 150g" data-meat>ベーコン</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">オリーブオイル</li>
  <li data-quantity="25cl" data-vegetable="liquid">白ワイン</li>
</ul>

そしてシンプルなスタイルシートです。

/* "data-vegetable"属性をもつ要素の
   文字色を緑色にする */
[data-vegetable] {
  color: green;
}

/* "data-vegetable"属性の値が"liquid"の要素の
   背景色を金色にする */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* "data-vegetable"属性の値に"spicy"を含む要素の
   文字色を赤にする */
[data-vegetable~="spicy"] {
  color: red;
}

結果は以下のようになります。

: この例でみられる data-* 属性はデータ属性と呼ばれます。 それらは独自のデータを HTML 属性に保存する方法を提供し、容易に取り出され、使用されます。より多くの情報のために、データ属性の使用方法をみてください。

部分一致属性セレクター

ここに分類される属性セレクターは、「正規表現風セレクター」としても知られています。なぜならば、それらは正規表現によく似た柔軟なマッチングを提供するからです。(ただし、これらのセレクターは本当の正規表現ではありません)

  • [attr|=val] : このセレクターはattr属性の値がvalに完全に一致するか、val-で始まるすべての要素を選択します。(このダッシュは誤りではなく、言語コードに対応するためです。)
  • [attr^=val] : このセレクターはattr属性の値がvalで始まるすべての要素を選択します。
  • [attr$=val] : このセレクターはattr属性の値がvalで終わるすべての要素を選択します。
  • [attr*=val] : このセレクターはattr属性の値が部分文字列valを含むすべての要素を選択します。(部分文字列は文字列の一部です。例えば、"cat"は文字列"caterpillar"の部分文字列です。) 

上の例に以下のCSSルールを追加しましょう。

/* 言語を選択する古典的な方法 */
[lang|="fr"] {
  font-weight: bold;
}

/* "data-quantity"属性の値が"optional"で始まる要素 */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* "data-quantity"属性の値が"kg"で終わる要素 */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* "data-vegetable"属性の値が"not spicy"を含む要素の
   文字色を緑に戻す */
[data-vegetable*="not spicy"] {
  color: green;
}

 

新しいルールによって、結果は以下のようになります。

練習問題: サッカー結果のスタイリング

この練習問題では、シンプルなサッカー結果リストのスタイルを設定するために属性セレクターを追加してみてください。問題は3つあります。

  • はじめの3つのルールはそれぞれ項目の左側にイギリス、ドイツ、スペインの国旗を表示します。それぞれのチームに適切な国旗が表示されるように、言語にマッチする属性セレクターを埋めてください。
  • 4番目から6番目のルールはそれぞれの項目に対してリーグでの順位が上がった(緑、rgba(0,255,0,0.7))のか、下がった(赤、rgba(255,0,0,0.5))のか、変わらなかった(青、rgba(0,0,255,0.5))のかを示す背景色を設定します。正しい色が正しいチームにマッチするようにdata-perf属性の値に含まれるincsamedec文字列にマッチする属性セレクターを埋めてください。
  • 7番目から8番目のルールは昇格したチームを太字にし、降格の危機にあるチームを灰色の斜体にします。これらのスタイルが正しいチームにマッチするように、data-perf属性の値に含まれるproおよびrel文字列にマッチする属性セレクターを埋めてください。

もしも失敗したら、リセットボタンを使えばいつでもリセットできます。本当に行き詰まったときは、解答を表示ボタンを押せば解答例を見られます。

関連情報

属性セレクターリファレンスページの使用例を参照してください。

次にやること

次はギアを上げて、疑似クラスと疑似要素について見ます。

このモジュールの文書

 

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

このページの貢献者: hamasaki, m-yamamo0417, dskmori, Uemmra3
最終更新者: hamasaki,