とっちゃん@nyanco! です。
今回はCSSセレクタで正規表現が使えてめちゃくちゃ便利！なことに気づいたよというお話です。
ちなみに完全な正規表現ではないですが知ってるとかなり柔軟に要素指定ができるようになりますにゃ〜！
▼拡張機能「Stylus（スタイラス）」なんかでももちろん使えます！
正規表現セレクタの公式
早速ですが、基本的な公式は以下の3つとなります。
[属性名*=“xxx”]：部分一致（「xxx」という文字列を含む「属性名」を指定）
[属性名^=“xxx”]：前方一致（「xxx」という文字列から始まる「属性名」を指定）
[属性名$=“xxx”]：後方一致（「xxx」という文字列で終わる「属性名」を指定）
「*=」「^=」「$=」という演算子で一致範囲を指定しますにゃ〜
ちなみに、正規表現では「^」は行頭、「$」は文末を意味するのでそれぞれイメージ通りで覚えやすいですが、正規表現のワイドルカードである「*」が部分一致なのは個人的に少し違和感があります。
正規表現セレクタの具体例
以下に具体例をいくつか挙げておきます。
▼idに「inner」という文字を含むあらゆる要素の背景色をベージュにする
[id*="inner"] { background: beige; }▼classが「box_」から始まるdiv要素のテキストカラーを赤にする
div[class^="box_"] { color: red; }▼nameが「link」で終わるa要素を親にもつspan要素のフォントサイズを15pxにる
a[name$="link"] span { font-size:15px; }タグを前に記述することでタグで絞り込んだり、属性の種類もidやclass以外も色々使えるのでかなり柔軟性のあるセレクタを作ることができます。
これまでは「,」で区切って複数のセレクタを指定してたりしてましたが、ある程度規則性のあるclass名・id名などを意識してつければ一括で指定できるようになりそうですにゃ〜
おわりに
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント