【CSS】セレクタに正規表現を使う方法＆サンプル集

CSSのソースは少ないコードでシンプルにできるとスマートですよね。管理も楽になり容量も軽くなる、といいことずくめです。

ちょっと上級テクニックになりますが、CSSではセレクタ内で正規表現を使うことができることをご存じでしょうか。正規表現を使うとさらにコードを簡略化することができます。

今回はCSS内のセレクタで使える正規表現とコードサンプルを紹介します。

CSSでセレクタに正規表現を使う方法

CSSでセレクタに使うことができる代表的な正規表現は次の3つです。

• 前方一致
• 後方一致
• 部分一致

以下、サンプルと解説になります。

前方一致

<div class="box01"></div>
<div class="box02"></div>
<div class="clear box03"></div>

div [class^="box"] {
  background:blue;
}

例えば、クラス名が「box」で始まる全てのクラスに対して属性を設定したい場合は[class^=”クラス名”]を指定します。上記の例だとdivタグに指定されている「box」で始まる全てのクラスに適用されます（1行目と2行目）。3行目はclearから始まっているため適用されません。上はclassで指定していますが、idでも同じように利用できます。

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

後方一致

<div class="box01-blue"></div>
<div class="box02-green"></div>
<div class="box03-blue"></div>

div [class$="blue"] {
  background:blue;
}

上記の例だと、後方一致はクラス名が「blue」で終わる全てのクラス（1行目と3行目）に適用されます。行頭にマッチの「^」が「$」になっただけなので簡単ですね。

部分一致

<div class="box01-hoge-blue"></div>
<div class="box02-green hoge"></div>
<div class="box03-blue-hoge"></div>

div [class*="hoge"] {
  background:blue;
}

部分一致はクラス名のどこかにマッチしていればスタイルが適用されます。上記の例だと全てのdivにbackground:blue;が適用されます（全てのクラス名にhogeが入っているため）。