CSSの接頭辞と接尾辞

CSSのクラスセレクタ名に接頭辞と接尾辞の仕組みを取り入れた一歩進んだセレクタの書式を紹介します。

接頭辞

CSSのフレームワーク(仕組み、構造)にはクラスセレクタ名をうまく使い分けて指定をすることができます。下記のような二つのクラスが指定されている状態を接頭辞を使いまとめてみます。

上記の「apple」セレクタは三つの共通部分をCSSで定義しています。「apple-*」セレクタの三つは個々の指定をしています。ここで「apple」セレクタを削除します。

上記の状態で先ほど削除した「apple」セレクタの共通スタイルを接頭辞のセレクタを用いて記述すると下記になります。

上記の接頭辞セレクタを用いて共通スタイルを一度に指定することができます。しかし、この接頭辞セレクタには一つ問題があります。下記のような複数のクラスで途中(二番目以降)の指定状態では適用されません。

上記の状態を回避する方法として「*=」セレクタで記述します。

接尾辞

同じく接尾辞の記述方法でも同じことができます。

実際、そこまでシステマチックなことをするのか!って事は置いておいて、知らないよりは知っていた方が良いセレクタですね!

関連記事