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

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

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

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

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

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

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

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

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

前方一致 :  attr^="value"

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

後方一致 : attr$="value"

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

[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"]  のように書く
    一致させたい値が属性値のどこかに含まれている要素にスタイルが適用される

もちろん本来の正規表現と比べるとあまり複雑なことはできません。

ただセレクタをスマートに書きたいときは便利だと思います。

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください