Case Insensitive CSS Attribute Selector

CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make […]
The post Case Insensitive CSS Attribute Selector appeared first on David Walsh Blog.

---

Case Insensitive CSS Attribute Selector

David Walsh on
June 19, 2024

- 1

CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case!

Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive:

`

/ case sensitive, only matches "example" /
[class=example] {
background: pink;

/ case insensitive, matches "example", "eXampLe", etc. /
[class=example i] {
background: lightblue;

`

The use cases for this i flag are likely very limited, especially if this flag is knew knowledge for you and you're used to a standard lower-case standard. A loose CSS classname standard will have and would continue to lead to problems, so use this case insensitivity flag sparingly!

-->

[Image: Request Metrics real user monitoring]

[Image: Request Metrics real user monitoring]

---

[Original source](https://davidwalsh.name/css-attribute-case)