すでにhtmlが運用されていて、idやclassなどの属性の名称変更も追加もできない、という想定の下で、各要素のデザインに変更を加えたい場合、正規表現を使った属性セレクターで、選択対象を絞り込むことができます。
- 単に「=」は、文字列が、完全一致
- 「^=」は、文字列が、～で始まる（前方一致）
- 「$=」は、文字列が、～で終わる（後方一致）
- 「*=」は、文字列に、～を含む
サンプルは、それぞれid名または、class名が指定されたli要素です。下側の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;
}
