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 after 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 many others. */
[class=example i] {
  background: lightblue;
}

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

  • CSS Animations Between Media Queries

    CSS animations are proper up there with sliced bread. CSS animations are environment friendly as a result of they are often {hardware} accelerated, they require no JavaScript overhead, and they’re composed of little or no CSS code. Very often we add CSS transforms to components by way of CSS throughout…

  • Serving Fonts from CDN

    For max efficiency, everyone knows we should put our property on CDN (one other area).  Together with these property are customized net fonts.  Sadly customized net fonts by way of CDN (or any cross-domain font request) do not work in Firefox or Web Explorer (accurately so, by spec) although…


Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles