CSSの正規表現：ワイルドカードを設定するコツ

正規表現を使えば、一定条件の複数クラス名を全て対象範囲に含めたCSSスタイル設定ができます。

正規表現には前方一致（接頭辞）・部分一致・後方一致（接尾辞）のワイルドカードがあります。

HTML上では複数クラスを並べるのが主流なので、部分一致と併用した記述が望ましいです。

正規表現で無駄なCSSを卒業

以前私は以下の様なクラス名を付けてCSSを書いていた事がありました。

共通スタイルと個別スタイルを持つ複数のクラスセレクタを準備する場合ですね。

お恥ずかしながらその一部をご紹介します。

以前までのCSSの書き方例

連番を設置するタイプ

.contents1, .contents2, .contents3, .contents4{ …共通プロパティ } .contents1{ …個別プロパティ } .contents2{ …個別プロパティ }

種類名称を付けるタイプ

.color-red, .color-blue, .color-green{ …共通プロパティ } .color-red{ …個別プロパティ } .color-blue{ …個別プロパティ }

共通プロパティを1回書くだけで済むように

上記の例は複数クラスセレクタに共通のプロパティを一括設定し、別途個別スタイルを各クラスに用意しています。

これだと共通プロパティを何回も書かずに済む利点はあります。

一見コード量を短縮しているように見えるでしょう。

都度クラス追加が必要になる

しかしこのクラスセレクタの種類を増やす場合に難点があります。

共通プロパティのクラス名と個別プロパティのクラス名の両方を一つずつ増やさなければなりません。

「,」を付けて、クラス名を縦にズラッと並べる事になります。

自分でも余計な（遠回りな）CSSを書いている自覚はあり、何とかスマートにならないかと思っていました。

接頭辞・接尾辞

そこで本記事では、正規表現を使った記述方法をご紹介します。これを知った時随分楽になりました。

正規表現とする対象には、接頭辞や接尾辞があります。

接頭辞とは単語の先頭に付加して特定の意味を付け加える要素（接辞）のことです。

「接頭辞」のことを専門用語で、Prefix（プレフィックス）と呼びます。

ベンダープレフィックスも接頭辞

「ベンダープレフィックス」は耳にしますよね。

機能を一般に先駆けて先行実装する際の、ブラウザ開発会社が提供する独自の拡張機能です。

-moz-や-webkit-の様にプロパティ名の頭に付けるため、ベンダープレフィックスと呼んでいるのですね。

接尾辞：suffix

それに対し「接尾辞」の事をsuffix（サフィックス）と呼びます。

先ほどと逆で単語の語尾に付与し、特定の意味を付け加える要素（接尾）のことになります。

ワイルドカードを設定して短縮する

まずは記述方法から紹介しましょう。

一例として正規表現の前方一致ワイルドカードを使った方法を紹介します。

CSS設定例（「^」の設定）

[class^="contents"]{ border: solid 1px #ccc; } .contents1{ background: #f1f1fd; } .contents2{ background: #ccc; } [class^="color-"]{ font-weight: 700; } .color-red{ color: red; } .color-blue{ color: blue; }

この様にすると、contents1もcontents2もcontents3も全てこの範囲内に入ります。

厳密には「contents」から始まるあらゆるクラス名が対象になる訳ですね。

クラスセレクタを増やしても共通部分は触らずに済む

このような正規表現で設定をしておけば仮にクラスセレクタが増えても、正規表現の共通プロパティ部分は編集する必要がありません。

「,」でクラス名を追加する必要が無く、個別プロパティの部分だけ追加すればよいので大変便利ですね。

何よりソース量が少なくて済みます。

正規表現を示すワイルドカード

ここでワイルドカードについて詳しく触れておきましょう。これは正規表現を示すものです。

完全一致ではない、ある一定の範囲を対象にする際に使用する記号ですね。

ワイルドカードには以下の様なものがあります。

ワイルドカードの種類

オリジナルのクラスセレクタを作成した場合、正規表現を使えば一気に対象範囲にできます。

別のフレームワークを使っている場合は、被らない様なクラス名を付けましょう。

前方一致例

前方一致は、クラス名の「開始文字」を常に参照します。

HTML

<div class="box1"></div> <div class="box2"></div> <div class="mt20 box3"></div>

CSS

[class^=box]{ background: #f1f1fd; }

例えばクラス名が「box」で始まる要素にスタイル設定したい場合、[class^="クラス名"]と指定します。

これにより、上記の1つ目と2つ目にはスタイルが適用されます。

それに対し3つ目は複数クラスが設定されており、最初が「mt20」から始まっているため適用がされないのですね。

部分一致例

部分一致は、クラス名内の「特定文字列」を常に参照します。

HTML

<div class="box1-mt-blue"></div> <div class="box2-green mt"></div> <div class="box-3 mt20"></div>

CSS

[class*="mt"]{ background: #f1f1fd; }

部分一致の場合、クラス名のどこかに文字列を含んでいればスタイルが適用されます。

上記の例では全てのクラス名にmtが入っているため、いずれもbackground: #f1f1fd;が適用されます。

1つ目や3つ目の「box1-mt-blue」「mt20」は本来別のクラス名なのですが、mtを含むため適用される事に注意ですね。

後方一致例

後方一致は、クラス名の「末尾の文字列」を常に参照します。

HTML

<div class="color-red"></div> <div class="color-green"></div> <div class="style-red"></div>

CSS

[class$="red"]{ color: #cc0000; }

クラス名が「red」で終わる全てのクラス（1つ目と3つ目）に適用されます。

color-redとstyle-redでクラス名が違っても、赤い要素を赤くする事ができますね。

クラス名が先頭から始まらない場合をカバーする

接頭辞として「^」を使った場合、設定したクラス名は必ず「先頭」から始まる必要があります。

しかし昨今、クラス名は複数並べる事が多いですよね。

複数クラスの設定時に注意

HTML（複数クラスを設定した例）

<div class="wrap contents5 mt-50"> … </div>

上記だと、複数クラスの2番目に並んでいますよね。

この場合、content5がクラス名の最初から始まっていないので設定が効きません。

前方一致のワイルドカード「^」が「～から始まる」指定であるためですね。

これを解消するため、以下の追記をおこないます。

部分一致と併用する

CSS追記

[class^="contents"], [class*=" contents"]{ border: solid 1px #ccc; } [class^="color-"], [class*=" color-"]{ font-weight: 700; }

「,」で「～を含む」の部分一致ワイルドカード「*」を追記し、「半角スペースとクラス名」が含まれる様にしています。

この2つの設定により、クラス名が「contents」で始まるものと、途中にある場合の「 contents」を含む様になります。

複数クラスの途中に出現するのなら「半角スペース」が前につくため、そこをうまく応用しています。

部分一致のみでは補えない

今回の様に2行書かなくても、部分一致ワイルドカード「*」で済むような気もしますよね。

CSS（*のみ）

[class*="color-"]{ }

ただこの場合、以下の様なクラス名でもスタイルが反映されてしまいます。

HTML（対象を一部に含むクラス名）

<div class="header-color-red"> </div>

別クラス名ですが、一部に対象文字が含まれていますよね。

では名称の前に半角スペースを入れたらどうでしょうか。

CSS（半角スペースを設置）

[class*=" color-"]{ }

この様に半角スペースを付けると、今度は逆に前方一致「最初から始まる場合」に対応できない事がわかります。

なのでやはり、[class^="color-"]とセットで追記する必要があるのです。

クラス名が末尾から始まらない場合をカバーする

同様に接尾辞を使った場合、クラス名は必ず「指定した末尾」で終わる必要があります。

接尾辞の場合、後方一致のワイルドカード「$」が正規表現に使われます。

ただし接頭辞の時と同様に、複数クラスが設定されている場合は必ず末尾になるとは限りません。

後方一致と部分一致の併用例

先ほどと同様に、部分一致と併用する事になります。

CSS設定例（「$」の設定）

[class$="-wrap"], [class*="-wrap "]{ /*共通プロパティ*/ }

後方一致の「$」により、名前が-wrapで終わるクラス名を全て対象にしています。

さらに「*」を追記して、複数クラス名として途中に記述された場合も含めます。

この時半角スペースは名前の後ろにつけます。これにより複数クラスの途中追記の接尾辞にも対応できます。

一押し人気コーナー紹介