CSSでセレクターに正規表現を使うには？コード例で解説

最初に言っておくとCSSでは完全な正規表現は使えません。

ただ完全ではないものの、セレクタ内で正規表現を使うことは可能です。

ということでCSS内のセレクタで使える正規表現とそのコード例を紹介します。

このページの目次

セレクタに使える３つの正規表現
セレクタに正規表現を使っている例
ここまでのまとめ

セレクタに使える３つの正規表現

CSSでセレクタに使うことができる正規表現は次の３つ

前方一致
後方一致
不完全一致

この３つを使ってある属性に当てはまる要素にスタイルを適用可能です。

詳しい使い方やコード例については次の通り

前方一致 : attr^="value"

まず１つめは属性値に対して前方一致させるような正規表現

要素を elem 、属性名を attr 、一致させたい値を value として次のように書きます。

elem[attr^="value"]{
  /** 適用したいスタイル... */
}

elem[attr^="value"]{

/** 適用したいスタイル... */

}

セレクタの = を ^= に変えればいいだけです。

そして属性値の最初が value で始まるものにだけスタイル適用されます。

具体的な使い方のコード例は次の通り

例えば次のような５つのdiv要素を考えてみてください。

<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
<div id="fourth_box"></div>
<div id="fifth_box"></div>

このときid属性が box から始めるdiv要素にだけ背景色を変えるスタイルを適用したいとします。

その場合は次のようなCSSを書けばOK

div[id^="box"]{
  background: skyblue;
}

div[id^="box"]{

background: skyblue;

}

[id^="box"] が前方一致させている部分

もちろんid属性だけでなく、 class や type など全ての属性名が指定可能です。

以上がCSSで前方一致させる正規表現の書き方

ちなみに普通の正規表現だと ^ は文頭を表す記号として使われてます。

なので初めと一致させるのに ^= を使っていると考えると覚えやすいです。

後方一致 : attr$="value"

お次は属性値に対して後方一致させるような正規表現

要素を elem 、属性名を attr 、一致させたい値を value とすると次のように書けます。

elem[attr$="value"]{
  /** 適用したいスタイル... */
}

elem[attr$="value"]{

/** 適用したいスタイル... */

}

上のように = の分かりに $= を使っています。

使い方についてのコード例は次の通り

まず次のような５つのdiv要素があるとしましょう。

<div id="first_box_green"></div>
<div id="second_box_green"></div>
<div id="third_box_green"></div>
<div id="fourth_box_gray"></div>
<div id="fifth_box_gray"></div>

このときid属性が green で終わる要素だけ背景色を緑色にしたいとします。

その場合は次のようなCSSを書けばOK

div[id$="green"]{
  background: lightgreen;
}

div[id$="green"]{

background: lightgreen;

}

[id$="green"] が後方一致させている部分

もちろんこれもdi要素だけなく、全ての属性に対して指定可能です。

以上がCSSでの後方一致させる正規表現の書き方

ちなみに普通の正規表現だと $ は文末を表す記号です。

なので文末を表す記法だから $= と書くと覚えやすいです。

不完全一致 : attr*="value"

最後はある属性値に対して不完全一致させる正規表現

不完全一致なので探したい値が属性値のどこかにマッチすればスタイルが適用されます。

要素を elem 、属性名を attr 、検索したい値を value とすると次のような書き方

elem[attr*="value"]{
  /** 適用したいスタイル */
}

elem[attr*="value"]{

/** 適用したいスタイル */

}

不完全一致では = ではなく *= を使うのが普通の書き方と違うところ

具体的な使用例については次の通りです。

まず今までと同じく次の５つのdiv要素があるとしましょう。

<div id="first_hoge_box"></div>
<div id="second_hoge_box"></div>
<div id="third_hoge_box"></div>
<div id="fourth_piyo_box"></div>
<div id="fifth_piyo_box"></div>

このときid属性に hoge を含む要素だけ背景色を赤色にしたいとします。

その場合は次のCSSを書けばOK

div[id*="hoge"]{
  background: lightsalmon;
}

div[id*="hoge"]{

background: lightsalmon;

}

[id*="hoge"] の部分が不完全一致させている部分

不完全一致なので hoge がid属性値のどこかに含まれる要素に適用されることに注意です。

以上がCSSで不完全一致させる書き方

ちなみに * は普通の正規表現だと任意の0文字以上を表す記号です。

これについてはCSS特有の書き方かもしれません。

セレクタに正規表現を使っている例

ここまでセレクタに正規表現を使う方法やコード例を紹介しました。

ちなみにコード例で要素にどうスタイルが適用されるかは次のCodePenを見てください。

See the Pen YJjZpv by ぴー助 (@pisuke-code) on CodePen.

背景色が灰色以外の要素が前方・後方・不完全一致が適用されている要素になります。

ここまでのまとめ

ということでCSSでの正規表現の書き方まとめ

前方一致
属性名を attr 、一致させたい値を value とすると [attr^="value"] のように書く
一致させたい値が属性値に最初に含まれている要素にスタイルが適用される
後方一致
属性名を attr 、一致させたい値を value とすると [attr$="value"] のように書く
一致させたい値が属性値の最後に含まれている要素にスタイルが適用される
不完全一致
属性名を attr 、一致させたい値を value とすると [attr*="valur"] のように書く
一致させたい値が属性値のどこかに含まれている要素にスタイルが適用される