この記事は翻訳作業中です。

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

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

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

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

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

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

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

/* All elements with the attribute "data-vegetable"
   are given green text */
[data-vegetable] {
  color: green;
}

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[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ルールを追加しましょう。

/* Classic usage for language selection */
[lang|="fr"] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the substring "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

 

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

Active learning: Styling soccer results

In this active learning, we'd like you to try your hand at adding attribute selectors to some rules to style a simple soccer results listing. There are three things to try to do here:

  • The first three rules add a UK, German, and Spanish flag icon respectively to the left hand side of the list items. You need to fill in appropriate attribute selectors so that the teams are given their correct country flags, matched by language.
  • Rules 4–6 add a background color to the list items to indicate whether the team has gone up in the league (green, rgba(0,255,0,0.7)), down (red, rgba(255,0,0,0.5)), or stayed in the same place (blue, rgba(0,0,255,0.5).)  Fill in the appropriate attribute selectors to match the correct colors to the correct teams, matched by the inc, same and dec strings that appear in the data-perf attribute values.
  • Rules 7–8 make teams that are set to be promoted bold, and teams that are in danger of being relegated italic and gray. Fill in appropriate attribute selectors to match these styles to the correct teams, matched by the pro and rel strings that appear in the data-perf attribute values.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

関連情報

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

次にやること

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

このモジュールの文書

 

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

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