Case Insensitive CSS Attribute Selector

Date:

Share post:

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!

Request Metrics real user monitoring

Source link
spot_img

Related articles

Threat Intelligence Executive Report – Volume 2025, Number 4 – Sophos News

The Counter Threat Unitâ„¢ (CTU) research team analyzes security threats to help organizations protect their systems. Based on...

Trading Computers: Building the Best

When it comes to building the best trading computers, performance isn’t just a luxury—it’s a necessity. In the...

Java Concurrency and Multithreading: A Practical Guide

Imagine: your online store is launching a massive...

Anduril, Blue Origin to study how to transport cargo from orbit to Earth for the Pentagon

Blue Origin and Anduril have landed new study contracts with the U.S. Air Force to explore how their...