Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

属性セレクタAttribute selectorsTOPCSSSelectorAttribute

  1. E[foo]属性セレクタ(属性名の完全一致)
  2. E[foo="bar"]属性セレクタ(単一属性値の完全一致)
  3. E[foo|="en"]属性セレクタ(属性値の部分一致)
  4. E[foo~="bar"]属性セレクタ(複数の属性値のうち1つが完全一致)

属性セレクタ(属性値の部分一致)Attribute selector

書式E[foo|="en"]個別性1
属性セレクタについて

この属性セレクタは、任意の属性名(foo)と、それに対応する属性値との一致でマッチングします。属性値は"en-US"のようにハイフン付きの値で前の部分が一致する場合でもマッチングの対象となります。もともと言語の種類を示す値との一致を意図して用意されたものですが、実際にはどんな属性値にでも使用することができます。

属性セレクタの使い方

次に示すような記述パターンが可能です。

[foo|="en"]		{ ... }	foo属性と値を持つ全ての要素
*[foo|="en"]		{ ... }	foo属性と値を持つ全ての要素(上に同じ)
E[foo|="en"]		{ ... }	foo属性と値を持つ要素E
E[foo|="en"][foo|="en"]	{ ... }	複数の一致条件を持つ要素E

下の例では、指定された属性(class属性)とそれに対応する属性値を持つp要素をマッチングの対象としています。属性値はハイフン付きであっても前方部分が一致していればマッチします。また、複数の属性値がスペース区切りで存在する場合、最初の属性値に対してのみ部分一致が適用されます。

p[class|="attr"] { font-weight: bold; }	ハイフン前の属性値が一致するp要素
<p class="attr"> ... </p>		属性値の完全一致
<p class="attr-sub"> ... </p>		属性値(ハイフン前)の部分一致
<p class="attr-sub sub"> ... </p>	複数の属性値でも最初にあれば一致
<p class="sub attr-sub"> ... </p>	複数の属性値で一致しないパターン
<p class="attrsub"> ... </p>		ハイフンが無ければ部分一致しない
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.