正規表現を使った属性セレクターで、選択対象を絞り込む（２）

「正規表現を使った属性セレクターで、選択対象を絞り込む」の（２）です。（１）はこちらから

属性セレクター・前方一致、後方一致

「^=」は、文字列が、～で始まる（前方一致）
「$=」は、文字列が、～で終わる（後方一致）

サンプルは、ボタン風にしたa要素のそれぞれに表示テキストと同じものをtitle属性として記述しています（上側）。下側は、title属性にテキストを追加するなどして、属性セレクターで表示を変更しています。

サンプル下側のhtmlソース

<ul class="dummy">
    <li><a href="#" title="item01">item01</a></li>
    <li><a href="#" title="item02-ex">item02</a></li>
    <li><a href="#" title="pend-item03">item03</a></li>
    <li><a href="#" title="item04">item04</a></li>
    <li><a href="#" title="pend-item05">item05</a></li>
    <li><a href="#" title="non-item06">item06</a></li>
    <li><a href="#" title="item07">item07</a></li>
  </ul>

サンプル

CSSソース

/*title属性の後方一致で'ex'なら背景画像を緑に*/
ul.dummy li a[title$=ex] {
	background:url(images/bt_bg-green.jpg) repeat-x;
	}
/*title属性の前方一致で'non'なら非表示に*/
ul.dummy li a[title^=non] {
	display:none;
	}
/*title属性の前方一致で'pend'なら表示を薄く、カーソルを禁止に*/
ul.dummy li a[title^=pend] {
	opacity:0.5;
	cursor:not-allowed; 
	}
ul.dummy li a[title^=pend]:hover {
	color:#444;
	cursor:not-allowed; 
	}