Wednesday, February 4, 2026

Case Insensitive CSS Attribute Selector


CSS selectors by no means stop to amaze me in how highly effective they are often in matching advanced patterns. Most of that flexibility is in mum or dad/little one/sibling relationships, very seldomly in worth matching. Think about my shock once I discovered that CSS permits matching attribute values regardless off case!

Including a {area}i to the attribute selector brackets will make the attribute worth search case insensitive:

/* case delicate, solely matches "instance" */
[class=example] {
  background: pink;
}

/* case insensitive, matches "instance", "eXampLe", and so on. */
[class=example i] {
  background: lightblue;
}

The use circumstances for this i flag are probably very restricted, particularly if this flag is knew data for you and also you’re used to a normal lower-case customary. A unfastened CSS classname customary could have and would proceed to result in issues, so use this case insensitivity flag sparingly!

  • 7 Essential JavaScript Functions

    I bear in mind the early days of JavaScript the place you wanted a easy perform for nearly every thing as a result of the browser distributors applied options in a different way, and never simply edge options, primary options, like addEventListener and attachEvent.  Occasions have modified however there are nonetheless a couple of features every developer ought to…

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is everywhere in the tech information and for good purpose:  Mozilla’s lastly given internet builders the platform that they should create apps the best way they have been creating them for years — with CSS, HTML, and JavaScript.  Firefox OS has been quickly bettering…


Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles