CSS：属性セレクタを正しく使いわけよう

[class="test"] {
    /*クラス名が「test」のものにスタイル適用*/
}
[class*="test"] {
    /*クラス名に「test」を含むものにスタイル適用*/
}
[class^="test"] {
    /*クラス名が「test」から始まるものにスタイル適用*/
}
[class$="test"] {
    /*クラス名が「test」で終わるものにスタイル適用*/
}

上記のように、属性セレクタは=の前の演算子によって条件が変わります。
個人的には「*=」が最も使いやすいのですが、似た名前の属性名が存在する場合は「^=」に使い分ける必要があります。

注意としては、「^=」と「$=」はクラスの記述順の影響も受けるという点で、DOMに注意する必要があります。

[class^="test"] {
    font-weight:bold;
}

上記CSSの場合…

<div class="test clearfix">こちらにはスタイルが反映される</div>
<div class="clearfix test">こちらにはスタイルが反映されない</div>

このような事がおこります。

クラス名でなく他のHTMLプロパティも指定できるので、正しく使い分ければ非常に強力なセレクタです。