Case Insensitive CSS Attribute Selector

CSS selectors by no means stop to amaze me in how highly effective they are often in matching complicated patterns. Most of that flexibility is in mum or dad/little one/sibling relationships, very seldomly in worth matching. Contemplate 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 forth. */
[class=example i] {
  background: lightblue;
}

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