Case-insensitive attribute selector

概要

CSS属性セレクターに i 識別子を追加すると、属性値の比較が大文字・小文字を無視して行われます。XMLのように属性値が大文字小文字を区別する文書でも、柔軟なマッチングが可能です。ユーザー入力に依存する属性値や、異なるケースで記述される可能性のある値を一括でスタイリングする際に便利です。

対応ブラウザ

基本構文

a[href$=".PDF" i] {
  color: red;
}
input[type="email" i] {
  border-color: blue;
}

実務での使いどころ

• ファイル拡張子による柔軟なスタイリング

  .pdf、.PDF、.Pdf などケースの異なるファイルリンクを1つのセレクターで統一的にスタイリングできます。

注意点

アクセシビリティ

• セレクターの機能であり、アクセシビリティに直接的な影響はありません。

参考リンク

• MDN Web Docs — Case-insensitive attribute selector
• Can I use — Case-insensitive attribute selector