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
  • Page Visibility API

    Page Visibility API

    One event that’s always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • Regular Expressions for the Rest of Us

    Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…

  • Create a Simple Slideshow Using MooTools

    Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.

  • Font Replacement Using Cufón

Source link
spot_img

Related articles

British rail passengers urged to stay on guard after hack signals failure

Passengers of the UK's state-owned London North Eastern Railway (LNER) have been warned to be vigilant after cybercriminals...

RTX 50-Series Super refresh rumors & everything we know

Leak suggests Nvidia will soon discontinue the RTX 5080 and RTX 5070 Ti Updated: ...

Research, Review, Rebuild

Until recently, I held the belief that Generative Artificial Intelligence (GenAI) in software development was...

I Wasn’t Sure I Wanted Anthropic to Pay Me for My Books—I Do Now

A billion dollars isn’t what it used to be—but it still focuses the mind. At least it did...