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つが完全一致)

属性セレクタ(複数の属性値のうち1つが完全一致)Attribute selector

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

この属性セレクタは、スペースで区切られた複数の属性値(単一でも可)のうち、1つが完全一致した場合にマッチします。マッチングの対象となる値は、ハイフンがある場合はそれ以降も含めて完全一致している必要があります。

属性セレクタの使い方

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

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

下の例では、指定された属性(class属性)とそれに対応する属性値を持つp要素をマッチングの対象としています。単体、或いはスペース区切りで複数指定されている属性値のうち、1つでも完全一致しているものが含まれていればマッチします。

p[class~="sub"] { font-weight: bold; }	class属性の値が完全一致するp要素
<p class="sub"> ... </p>		属性値(単体)が完全一致
<p class="attr sub ex"> ... </p>	複数の属性値のうち1つが完全一致
<p class="attr-sub"> ... </p>		属性値が完全一致しない
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.