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
  • How to Create a RetroPie on Raspberry Pi – Graphical Guide

    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo…

  • 9 Mind-Blowing WebGL Demos

    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we’re still playing a bit of catch up to natively duplicate the animation capabilities that Adobe’s old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available…

  • Adding Events to Adding Events in jQuery
  • Google Font API

    Google Font API

    Google recently debuted a new web service called the Font API.  Google’s Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let’s take a quick look at the ways by which the Google Font…


Source link
spot_img

Related articles

Little fires everywhere for March Patch Tuesday – Sophos News

Microsoft on Tuesday released 57 patches affecting 10 product families. Six of the addressed issues are considered by...

The Tech Hardware You Need When Playing at Online Casinos SA

Online gaming is more convenient and engaging than ever, but a proper piece of technology can make all...

From Planning to Promotion: Elevating Your Pre-Event Marketing

Take Your Event Marketing to the Next Level – Discover Proven Strategies to Drive Early Registrations and Maximize...

You can watch the Starliner astronauts return to Earth after an unplanned nine-month visit

Those stranded Starliner astronauts are finally coming back to Earth, with a touchdown expected on Tuesday evening. Coverage...