要素の属性やその値によってスタイルの適用対象を指定することができます。

サンプル（最下段）は、a要素を含んだli要素で、すべてのa要素にはtitle属性を指定してあり、ダミーリンク02の属性値は、前に2つ、後に1つの半角スペースが入り、ダミーリンク03から05までは、属性値を半角スペース区切っています。また、（７）は属性値をハイフンで区切っています。

サンプルのhtmlソース

  <ul class="lista">
    <li class="ex2"><a title="style" href="#">ダミーリンク01</a></li>
    <li class="ex2"><a title="  おすすめ " href="#">ダミーリンク02</a></li>
    <li class="ex2"><a title="おすすめ 注目" href="#">ダミーリンク03</a></li>
    <li class="ex2"><a title="おすすめ 注目 NEW" href="#">ダミーリンク04</a></li>
    <li class="ex2"><a title="おすすめ 注目 NEW ★★★" href="#">ダミーリンク05</a></li>
    <li class="ex2"><a title="NEW" href="#">ダミーリンク06</a></li>	
    <li class="ex2"><a title="NEW-css-javascript" href="#">ダミーリンク07</a></li>			
  </ul>

 

（４）パート１の（２）と同じ、[属性名="属性値"]の形の属性セレクタでは、属性名と属性値が一致した要素をスタイル適用の対象にします。 この例（ a[title="css"]）では、属性名が「title」で属性値が「css」のa要素にスタイル（オレンジ色の「【css】」を後に付加）を適用します。

（４）CSSソース

	ul.lista li.ex2 a[title="style"]:after {
	  content:"【style】";
	  color:orange;
	}

 

（５）属性の値が半角スペース区切りの場合、値を個別に取り出して指定することができます。[属性名~="属性値"]の形の属性セレクタを使うことで、半角スペース区切りの値を個別に取り出します。半角スペースのない単独の値も同様になります。また属性値が"★★★"のみや、"★★★"の前後に複数の半角スペースが入ったものも同様に選択されます。

（５）CSSソース

	ul.lista li.ex2 a[title~="★★★"]:after {
	  content:"【★★★】属性名とスペス区切りの属性値が一致";
	  color:blue;
	}

 

（６）上と同じくハイフン区切りで、属性値Aがあり属性値Bが無いという場合、[属性名~="属性値A"]:not([属性名~="属性値B"])の形の属性セレクタで指定できます。単に属性値の"おすすめ"があるものと指定すると、上の（５）で指定したスタイルを上書きしてしまいます。また属性値が"おすすめ"のみや、"おすすめ"の前後に複数の半角スペースが入ったものも同様に選択されます。

（６）CSSソース

	ul.lista li.ex2 a[title~="おすすめ"]:not([title~="★★★"]):after {
	  content:"　スペース区切りで【おすすめ】があり【★★★】が無し";
	  color:green;
	}

 

（７）属性の値がハイフン区切りの場合、値を個別に取り出して指定することができます。[属性名|="属性値"]の形の属性セレクタを使うことで、ハイフン区切りの値（後にハイフンが入った状態の）を個別に取り出します。また属性値が"NEW"のみや、"NEW"の後にハイフンが入ったものも同様に選択されます。

（７）CSSソース

	ul.lista li.ex2 a[title|="NEW"]:after {
	  content:"【NEW】属性名とハイフン区切りの属性値が一致";
	  color:red;
	}

 

サンプル