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)と、それに対応する属性値との完全一致でマッチングします。属性値は引用符内の文字列が完全一致すること(ハイフン以降も含めて)が条件であり、複数の属性値が存在する場合はマッチングの対象となりません。

属性セレクタの使い方

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

[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>		複数の属性値の存在はNG
<p class="attr-sub"> ... </p>		属性値の部分一致もNG
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.