★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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...で調べてみました。

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

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

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

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

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

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

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

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

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

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

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。