CSSでは一部、正規表現・ワイルドカードを使用する事が可能です。
正規表現・ワイルドカードを使えば、「〇〇〇〇が含まれるクラス」や「〇〇〇〇で始まるクラス」などの指定が出来るようになり、無駄なCSSが減って管理しやすくもなります。
今回はCSSで正規表現・ワイルドカードを使用する方法を解説していきます。
正規表現とは
特定のルールに基づいて記述された文字列のパターンマッチングの事をいいます。
前方一致、部分一致、後方一致などのワイルドカードを使用する事で、特定の要素を指定する事が可能です。
正規表現とワイルドカード
先ほど記述したように、正規表現とワイルドカードの使用で、特定の要素を指定する事が出来ます。
ワイルドカードとは、完全一致では無い一定の範囲を対象とする際に使用する記号の事を言います。
以下のような形で、正規表現で文字列を、ワイルドカードで範囲の指定をする形となります。
/* 前方一致 */
div[class^="box"] {
color: red;
}上記の例では、divのクラス名がboxで始まるクラスをまとめて指定するものとなります。
正規表現とワイルドカードを用いた使用例
前方一致の例を紹介しましたが、他にもいくつか指定方法がありますので紹介いたします。
class属性をもつ全てのdivタグを指定
div[class] {
color: red;
}例)クラス属性をもつdivタグの文字色が赤になります。
前方一致
div[class^="box"] {
color: blue;
}例)クラス名が「box」で始まるdivタグの文字色が青になります。
後方一致
div[class$="box"] {
color: green;
}例)クラス名が「box」で終わるdivタグの文字色が緑になります。
部分一致
div[class*="box"] {
color: yellow;
}例)クラス名に「box」が含まれるdivタグの文字色が黄色になります。
上記のような正規表現、ワイルドカードを使用する事で、divタグやクラスに限らず様々な指定が可能です。
上手く使って分かりやすいCSSを書いていきましょう。
さいごに
いかがでしたでしょうか。
正規表現とワイルドカードを使う事で、CSSの簡素化や管理のしやすいCSSを記述する事が出来ます。
慣れるまで戸惑うかと思いますが、覚えて使っていけるといいですね。
