CSSのクラスセレクタ名に接頭辞と接尾辞の仕組みを取り入れた一歩進んだセレクタの書式を紹介します。
接頭辞
CSSのフレームワーク（仕組み、構造）にはクラスセレクタ名をうまく使い分けて指定をすることができます。下記のような二つのクラスが指定されている状態を接頭辞を使いまとめてみます。
|
1 2 3 4 5 |
<ul> <li class="apple apple-red">丸い赤いリンゴ</li> <li class="apple apple-blue">丸い青いリンゴ</li> <li class="apple apple-yellow">丸い黄色いリンゴ</li> </ul> |
上記の「apple」セレクタは三つの共通部分をCSSで定義しています。「apple-*」セレクタの三つは個々の指定をしています。ここで「apple」セレクタを削除します。
|
1 2 3 4 5 |
<ul> <li class="apple-red">丸い赤いリンゴ</li> <li class="apple-blue">丸い青いリンゴ</li> <li class="apple-yellow">丸い黄色いリンゴ</li> </ul> |
上記の状態で先ほど削除した「apple」セレクタの共通スタイルを接頭辞のセレクタを用いて記述すると下記になります。
|
1 |
[class^="apple-"] {プロパティ: 値;} |
上記の接頭辞セレクタを用いて共通スタイルを一度に指定することができます。しかし、この接頭辞セレクタには一つ問題があります。下記のような複数のクラスで途中（二番目以降）の指定状態では適用されません。
|
1 |
<p class="etc apple-red abc">複数のクラスが指定されている</p> |
上記の状態を回避する方法として「*=」セレクタで記述します。
|
1 |
[class^="apple-"],[class*=" apple-"] {プロパティ: 値;} |
接尾辞
同じく接尾辞の記述方法でも同じことができます。
|
1 |
[class^="-apple"],[class*="-apple "] {プロパティ: 値;} |
実際、そこまでシステマチックなことをするのか！って事は置いておいて、知らないよりは知っていた方が良いセレクタですね！