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
Request Metrics real user monitoring
Request Metrics real user monitoring
  • Convert XML to JSON with JavaScript
  • Write Better JavaScript with Promises

    Write Better JavaScript with Promises

    You’ve probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don’t see what makes them so special. Can’t you just use a callback? What’s the big deal? In this article, we’ll…

  • CSS Counters

    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us “older” developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole…

  • Save Text Size Preference Using MooTools 1.2

Source link
spot_img

Related articles

Intel Launches 11 Granite Rapids Based Xeon 600 Workstation CPUs

Today Intel is releasing their new Xeon 600 Workstation line of processors based on Granite Rapids. SemiAccurate likes...

50 Must-Do Checks Before Doors Open

Event day has a unique energy. Months of planning collapse into a few high-stakes hours, and every small...

Moltbook, the AI social network, exposed human credentials due to vibe-coded security flaw

Moltbook bills itself as a social network for AI agents. That's a wacky enough concept in the first...

Final Fantasy 2’s Word Memory system is an underrated gem

The original Final Fantasy was pretty bare bones in terms of its world-building, and followed four unnamed adventurers...