すでにhtmlが運用されていて、idやclassなどの属性の名称変更も追加もできない、という想定の下で、各要素のデザインに変更を加えたい場合、正規表現を使った属性セレクターで、選択対象を絞り込むことができます。

サンプルは、それぞれid名または、class名が指定されたli要素です。下側のCSSソースのコメントのようにデザインの変更を加えています。

サンプル

CSSソース

/*id名が'test01'なら背景色を薄い黄色に*/
[id=test01] {  
	background:#ffb;
	}
/*class名が'mtest03'なら背景色を薄い水色に*/
[class=mtest03] {
	background:#cff;
	}
/*class名が前方一致で'mtest'なら文字色を赤色に*/
[class^=mtest] { 
	color:red;
	}
/*class名が後方一致で'b'なら背景色を薄いピンクに*/
[class$=b] { 
	background:#fdf;
	}
/*id名が、'tx0'を含んでいれば文字色をグリーンに*/
[id*=tx0] {
	color:green;
	}

戻るボタン