Case-insensitive attribute selector
CSS属性セレクターに i 識別子を追加すると、属性値の比較が大文字・小文字を無視して行われます。XMLのように属性値が大文字小文字を区別する文書でも、柔軟なマッチングが可能です。ユーザー入力に依存する属性値や、異なるケースで記述される可能性のある値を一括でスタイリングする際に便利です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.selectors.attribute.case_insensitive_modifier | 49 | 79 | 47 | 9 | 49 | 9 |
基本構文
CSS
a[href$=".PDF" i] {
color: red;
}
input[type="email" i] {
border-color: blue;
}ライブデモ
実務での使いどころ
-
ファイル拡張子による柔軟なスタイリング
.pdf、.PDF、.Pdf などケースの異なるファイルリンクを1つのセレクターで統一的にスタイリングできます。
注意点
- HTMLでは多くの属性値がすでに大文字小文字を区別しませんが、data-* 属性やカスタム属性では区別されます。必要な場面で適切に使用してください。
アクセシビリティ
- セレクターの機能であり、アクセシビリティに直接的な影響はありません。