CSSで使える正規表現風セレクタの活用法！コードを効率化するテクニック

CSSのソースは少ないコードでシンプルにできると、管理が楽になるだけでなく、サイトの読み込み速度も向上し、容量も軽くなります。いわば「スマートなコーディング」が可能になるのです。

今回紹介するのは、少し上級テクニックですが、CSSセレクタ内で正規表現のような指定方法を使うことで、コードをさらに簡略化する方法です。これを使うと、特定のクラス名やidに対して柔軟なスタイル指定が可能になります。

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

CSSでは正規表現を直接使うことはできませんが、セレクタに似た機能を持つ属性セレクタを活用することで、正規表現に似た動作を実現できます。代表的なものは以下の3つです。

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

これらを活用することで、セレクタを柔軟に操作し、スタイル指定を効率的に行うことができます。以下で具体的なサンプルと共に詳しく解説します。

前方一致

前方一致では、クラス名やid名が特定の文字列で始まる要素を選択できます。

HTML

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

CSS

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

この例では、クラス名が”box”で始まる全ての要素に対して、background:blue;が適用されます。上記の例では、1行目と2行目の要素が対象ですが、3行目のクラスは”clear”で始まっているため適用されません。CSSの「^」記号が「～で始まる」という前方一致の動作を表しています。

後方一致

後方一致では、クラス名やid名が特定の文字列で終わる要素を選択します。

HTML

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

CSS

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

この例では、クラス名が”blue”で終わるすべての要素に対して、スタイルが適用されます。1行目と3行目の要素が対象となり、クラス名が「green」で終わる2行目は対象外です。正規表現と同様に、「$」記号が「～で終わる」という後方一致を示します。

部分一致

部分一致は、クラス名やid名に特定の文字列が含まれている要素を選択します。

HTML

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

CSS

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

この例では、クラス名の中に「hoge」が含まれていれば、全ての要素にbackground:blue;が適用されます。1行目、2行目、3行目のすべての要素に「hoge」という文字列が含まれているため、全ての要素にスタイルが適用されます。部分一致は「*」記号を使い、クラス名の中にその文字列が含まれている場合にマッチします。