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

サンプル（最下段）は、a要素を含んだli要素で、a要素にはtitle属性を指定したものと、そうでないものが混在します。

サンプルのhtmlソース

<ul class="lista">
	<li class="ex2"><a href="css-only-child.html">CSS3&nbsp;:only-child擬似クラスを使って、子要素が一つだけの場合にスタイル適用</a></li>
	<li class="ex2"><a title="NEW CSS3:not()擬似クラス" href="css-not.html">CSS3&nbsp;:not()擬似クラスを使って、表示する画像ファイルの拡張子を選別</a></li>
	<li class="ex2"><a href="css-first-last-not.html">CSS3&nbsp;:first-child疑似クラス、:not()擬似クラスなどを組み合わせて、やや複雑な要素選択</a></li>
	<li class="ex2"><a title="CSS3:nth-child疑似クラス" href="css-nth-child.html">CSS3&nbsp;:nth-child疑似クラスを使って、先頭から数えてn番目の子要素にcssを適用</a></li>
	<li class="ex2"><a href="css-nth-of-type.html">CSS3&nbsp;:nth-of-type疑似クラスを使って、先頭から数えてn番目の子要素（指定要素の）にcssを適用</a></li>				
	<li class="ex2"><a title="NEW CSS3:only-of-type擬似クラス" href="css-only-of-type.html">CSS3&nbsp;:only-of-type擬似クラスを使い、子要素が指定した要素タイプ一つだけの場合にスタイル適用</a></li>				
	<li class="ex2"><a title="CSS3:disabled擬似クラス 注目" href="css-disabled.html">CSS3&nbsp;:disabled擬似クラスなどを使って、input要素を種別ごとに色分け</a></li>			
</ul>

 

（１）属性セレクタの[属性名]は、属性名が一致する要素をスタイル適用対象にします。この例（a[title]）では、a要素のうち、title属性を指定したもののみ、スタイルを適用（文字色をブルーに）します。

（１）CSSソース

	ul.lista li.ex2 a[title] {
		color:#2059FA;
	}

 

（２）このtitle属性を指定したa要素のうち、title属性の値が「CSS3:nth-child疑似クラス」と一致するもの（a[title="CSS3:nth-child疑似クラス"]）のみ、オレンジ色文字の「おすすめ」を:after擬似要素を使って後ろに付加します。

（２）CSSソース

	ul.lista li.ex2 a[title="CSS3:nth-child疑似クラス"]:after {
	content:"【おすすめ】";
	color:orange;
	}

 

（３）同じくtitle属性を指定したa要素のうち、title属性の値が「NEW」で始まるもの（a[title^="NEW"]）のみ、赤色文字の「NEW」を:after擬似要素を使って後ろに付加します。

（３）CSSソース

	ul.lista li.ex2 a[title^="NEW"]:after {
		content:"NEW";
		color:red;
	}

 

（４）同じくtitle属性を指定したa要素のうち、title属性の値が「注目」で終るもの（a[title$="注目"]）のみ、緑色文字の「【注目】」を:after擬似要素を使って後ろに付加します。

（４）CSSソース

	ul.lista li.ex2 a[title$="注目"]:after {
		content:"【注目】";
		color:#090;
	}

 

サンプル