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 guardian/youngster/sibling relationships, very seldomly in worth matching. Contemplate my shock after I discovered that CSS permits matching attribute values regardless off case!

Including a {house}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 circumstances for this i flag are probably very restricted, particularly if this flag is knew information for you and also you’re used to a normal lower-case commonplace. A unfastened CSS classname commonplace can have and would proceed to result in issues, so use this case insensitivity flag sparingly!

  • Send Text Messages with PHP

    Children today, I inform ya.  All they care about is the expertise.  The video video games.  The bottled water.  Oh, and the texting, all the time the texting.  Again in my day, all we had was…OK, I had all of these items too.  However I nonetheless do not get…

  • How to Create a Twitter Card
  • Advanced CSS Tables II – Using Mootools JavaScript For Alternate Row Colors
  • CSS Gradients

    With CSS border-radius, I confirmed you the way CSS can bridge the hole between design and improvement by including rounded corners to parts.  CSS gradients are one other step in that route.  Now that CSS gradients are supported in Web Explorer 8+, Firefox, Safari, and Chrome…