CSS 正規表現でクラスを複数指定する

CSSで作成するクラスはなるべく少ない方が良いですよね。
でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。
その同じようなクラスにも１つずつ同じ属性を設定していくなんて事も多々あります。
かといって属性ごとにクラスを作って指定していくと困難なコードになります。
※特にCSSフレームワークを利用している時はクラス名だらけになります。

同じような属性を１つずつ設定していくのは面倒なので「正規表現」を利用して楽をしていきましょう！

「正規表現」を上手に利用するためには「クラス名に法則性を持たせる」事が重要です。
例えば、下線の装飾をするクラス名には「under」という名前を付けておくと「正規表現」で指定しやすいです。

正規表現を使ってCSSのクラスを指定する方法

代表的な「正規表現」は以下の３つです。

• 行頭にマッチ（例：underで始まるクラスを指定）
• 行末にマッチ（例：boldで終わるクラスを指定）
• 部分一致（例：クラス名のどこかにthroughがある）

行頭にマッチ

例えばクラス名が「under」で始まる全てのクラスに対して属性を設定したい場合は「[class^=”クラス名”]」を指定すればOKです。
上記の例だとPタグに指定されている「under」で始まる全てのクラスに下線を付けるという意味になります。

ちなみに「^」というのが「〜で始まる」という正規表現になります。

行末にマッチ

今度は逆にクラス名が「bold」で終わる全てのクラスに対して属性を設定したい場合は「[class$=”bold”]」と指定します。
行頭にマッチの「^」が「$」になっただけです。
上記の例だとPタグに指定されている「bold」で終わる全てのクラスを太字にするという意味になります。
簡単ですよね。

部分一致

これも簡単です。
上記の例だとクラス名のどこかに「through」が含まれている全てのクラスに取り消し線を付けるという意味になります。

サンプルも作ったので見て下さいね。

上記3つが最も簡単なCSSの正規表現になります。
指定したルールにマッチクラスを複数指定できるので非常に協力ではないでしょうか。
その他にも便利な正規表現は色々とありますので、また紹介したいと思います。