CSSで正規表現を使う方法をわかりやすく解説！

今回はCSSで正規表現を使う方法を解説します！

class名に〇〇が含まれる要素のみにCSSを適用する

適用元のHTML

text-small
text-medium
text-large
small-text
medium-text
large-text
media-small
media-medium
media-large

ここからclassにtextを含むものを選択する場合は以下のように書きます

[class*="text"]{
  color:red;
}

すると以下のようにclass名にtextが含まれている要素のみにCSSが適用されます

class名の先頭に〇〇が含まれる要素のみにCSSを適用する

classの先頭がtextの要素を選択する場合は以下のように書きます

[class^="text"]{
  color:red;
}

するとclass名がsmall-textのように最初がtextでない要素は選択されなくなります。

class名の末尾に〇〇が含まれる要素のみにCSSを適用する

classの先頭がtextの要素を選択する場合は以下のように書きます

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

するとclass名の末尾がtextの要素のみ選択されます。

まとめ

CSSで使える正規表現をまとめると以下になります。

〇〇を含む

*=

先頭が〇〇

^=

末尾が〇〇

$=

この記事が参考になりましたら、SNSでシェアしていただけるとうれしいです！