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

サンプル（最下段）のa要素はすべて「title属性」を指定しています。

サンプルのhtmlソース

  <ul class="lista">
    <li class="ex2"><a title="CSS" 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="javascript" href="#">ダミーリンク06</a></li>	
  </ul>

 

（８）[属性名*="属性値"]の形の属性セレクタを使うと、属性値に単数または複数の文字、記号を含む要素にスタイルを適用できます。この例では、属性値に大文字の「S」を含む要素の後に、紫色文字の"　title属性の属性値が大文字の「S」を含むもの"を追加します。ダミーリンク06も「s」を含みますが、小文字なので対象外になります。

（８）CSSソース

	ul.lista li.ex2 a[title*="S"]:after {
	  content:"　title属性の属性値が大文字の「S」を含むもの";
	  color:#93e;
	}

 

（９）上と同様、属性値に半角スペースを含む要素の後に、緑色文字の"　title属性の属性値が半角スペースを含むもの"を追加します。

（９）CSSソース

	ul.lista li.ex2 a[title*=" "]:after {
	  content:"　title属性の属性値が半角スペースを含むもの";
	  color:green;
	}

 

（１０）上と同様、属性値に「-NEW」を含む要素の後に、赤色文字の"　title属性の属性値が「-NEW-」を含むもの"を追加します。ハイフンが付いても単純にテキストとして処理されます。

（１０）CSSソース

	ul.lista li.ex2 a[title*="-NEW-"]:after {
	  content:"　title属性の属性値が「-NEW-」を含むもの";
	  color:red;
	}

 

（１１）上と同様、属性値に「め,注」を含む要素の後に、青色文字の"　title属性の属性値が「め,注」を含むもの"を追加します。ピリオドをまたいでも問題ありません。

（１１）CSSソース

	ul.lista li.ex2 a[title*="め,注"]:after {
	  content:"　title属性の属性値が「め,注」を含むもの";
	  color:blue;
	}

 

サンプル