CSSセレクタで大文字小文字を区別しないiフラグが便利

つい最近とても驚いたこと

CSSセレクタにiフラグが指定可能

それを使うとセレクタに対して「大文字小文字を区別しない」という指定ができます。まさかCSSで正規表現のiフラグが使えたとは...

CSSカスタマイズで役立ちそうなの記録しておきます。

CSSセレクタの大文字小文字を区別したくない場面

例えばこういうHTML要素がある場合...

<img src="hoge.jpg" />
<img src="fuga.JPG" />
<img src="piyo.jpg" />

単純にimg要素が並んでるだけだけど、真ん中の画像だけ拡張子がJPGになってます。こういう拡張子とかの大文字小文字が違う場合について

これに対して次のCSSを適用したとします。

img[src*="jpg"]{
  width: 100px;
  height: 100px;
}

このCSSの src*="jpg"  はセレクタの正規表現みたいなものです。

このケースだと hoge.jpg と piyo.jpg にのみCSSが適用され、fuga.JPGには適用されません。なぜなら [src*="jpg"]  と指定してるからです。

これに頭を悩ませてました・・・

セレクタには正規表現的にiフラグが指定できた！

こんな便利なのを今まで知らなかったとは

実はCSSで正規表現のiフラグが使えます。
これは大文字小文字を区別しないフラグのこと

先ほどと同じHTMLで考えてみましょう。

▼ なんか画像要素が並んでいるHTML例

<img src="hoge.jpg" />
<img src="fuga.JPG" />
<img src="piyo.jpg" />

ここで [src*="jpg"]  とだけ書くと、fuga.JPG にはマッチしてくれないという問題でした。今まではパータンの数だけセレクタを書いてました。

でもiフラグを使って書くと超スマート

▼ こういうCSSで大文字小文字の区別がなくなる!

img[src*="jpg" i]{
  width: 100px;
  height: 100px;
}

単純に [src*="jpg" i]  みたいにするだけ。これだけで大文字小文字が区別されなくなり、fuga.JPGもマッチ対象になるようですね。

そもそも正規表現みたいにiフラグが使えるなんて知らなかった。まさしく目からウロコ。今まで知らなかったのはなんでだろう？

もしかしたらiフラグ以外にもあるかもしれません。

それは少し調べてみようと思います。

属性セレクタでのiフラグのブラウザ対応状況

少し気になるのがブラウザの対応状況

そこでCan i use...で調べてみました。

▼ このような対応状況らしい

caniuse.com

 

2 Pockets

Case-insensitive CSS attribute selectors | Can I use... Support tables for HT...

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

残念ながらIE（Internet Explorer）では全バージョンで使えない模様。でも2022年6月にサポート終了みたいだし、もう気にしなくてOKですね。

主要ブラウザでは全て対応してるので問題ありません。

もちろんjQueryのセレクタでもiフラグは使える

当然ながらjQueryのセレクタでも同じことが可能

大文字小文字の区別をつけさせないことができます。

▼ 例えばこういうコードが書けるってこと

$('[src*="jpg" i]').each(function(i, elem){
  $(elem).css({
    'width': '100px',
    'height': '100px'
  });
});

これを知らずに今まで非効率なコードを書いてしまっていた。

これは便利なので活用していきたいです。