form内のinput要素で1行テキストボックスにだけwidth:300pxを適応させたい例。


(↑<input type="text" />にはwidth:300px;が適応されます。)


(↑<input type="password" />にはスタイルは適応されません。)

a要素のtitle属性に"ページの先頭へ"という値を含むもののだけ背景色を付けたい例。

これはtitle属性なしのリンクテキストです。

これはtitle="ページの先頭へ"の指定してあるリンクテキストです。

a要素のtitle属性に"ページの先頭へ"とname="hoge"という値を含むもののだけ背景色を付けたい例。

これはtitle="ページの先頭へ"とname="hoge"の指定してあるリンクテキストです。

このサンプルのCSS

input[type="text"]{
	width: 300px;
	}
a[title="ページの先頭へ"]{
	background:#fcc; /* 背景色・ピンク */
	}
a[title="ページの先頭へ"][name="hoge"]{
	background:#cfc; /* 背景色・黄緑 */
	}	
a[title="ページの先頭へ"]:hover{
	background:#f00;　/* hover時の背景色・赤 */
	}
a[title="ページの先頭へ"][name="hoge"]:hover{
	background:#090;　/* hover時の背景色・緑 */
	}

このサンプルのHTML

<p><input type="text" /><br />(↑<input type="text" />にはwidth:300px;が適応されます。)</p>
<p><input type="password" /><br />(↑<input type="password" />にはスタイルは適応されません。)</p>

<p><a href="#">これはtitle属性なしのリンクテキストです。</a></p>
<p><a href="#" title="ページの先頭へ">これはtitle="ページの先頭へ"の指定してあるリンクテキストです。</a></p>
<p><a href="#" title="ページの先頭へ" name="hoge">これはtitle="ページの先頭へ"とname="hoge"の指定してあるリンクテキストです。</a></p>