CSS [attr i] Case-Insensitive Attribute Matching

The i Flag

Inside any attribute selector, you can append a space and i to make the value comparison case-insensitive:

[type="text" i] { /* matches type="TEXT", "Text", "text" */ }
[lang="EN-US" i] { /* matches en-us, EN-us, eN-Us */ }
[href$=".PDF" i] { /* matches .pdf, .Pdf, .PDF */ }

Why It Matters

Although HTML attribute names are always case-insensitive (the parser normalizes <INPUT TYPE="TEXT"> to lowercase), values are not. type="email" and type="Email" are technically distinct strings to the CSS engine, even though every browser treats them the same for form behavior.

Worse, attributes like href, src, and data-* carry user-supplied or CMS-supplied values where casing is unpredictable.

Real-World Pitfall

a[href$=".pdf"]::after { content: " 📄"; }

If a contributor writes <a href="report.PDF">, the icon won't appear. The fix:

a[href$=".pdf" i]::after { content: " 📄"; }

The s Flag (Case-Sensitive)

For completeness, Selectors Level 4 also defines a s flag to force case-sensitive matching even in contexts where the attribute would normally be case-insensitive (rare in HTML, more relevant in XML or SVG):

[type="email" s] { /* explicit case-sensitive */ }

Specificity

Adding the flag does not change specificity. [type="email" i] is still (0, 1, 0).

Browser Support

i flag: Chrome 49+, Firefox 47+, Safari 9+, Edge 79+. Universal in 2026. s flag: Chrome 88+, Firefox 78+, Safari 14+.

Don't Forget the Space

The flag must be preceded by whitespace inside the brackets. [type="text"i] is a parse error in some engines; always write [type="text" i].