• Kangundo Road, Nairobi, Kenya
  • support@exoticdigitalaccess.co.ke
  • Opening Time : 07 AM - 10 PM
AutoGrow Textareas with CSS

Case Insensitive CSS Attribute Selector

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!

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!
  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was…OK, I had all of these things too.  But I still don’t get…

  • Chris Coyier: Some Amazing Work on CodePen III
  • Advanced CSS Tables II – Using Mootools JavaScript For Alternate Row Colors

Source link

Leave a Reply