Widely available Supported across all major browsers. Safe to use in production.

Case-insensitive attribute selector

The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
case insensitive modifier
49
79
47
9
49
9
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

Live demo

fileextendedchildmatch

CSS fileextendedchildmatch demo.

PreviewFullscreen

Inputtype. matchcombine

CSS Inputtype. matchcombine demo.

PreviewFullscreen

Dataattribute. matchcombine

CSS Dataattribute. matchcombine demo.

PreviewFullscreen

Use cases

  • Using Case-insensitive attribute selector

    The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links