Case Insensitive CSS Attribute Selector

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 father or mother/youngster/sibling relationships, very seldomly in worth matching. Contemplate my shock once I realized 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 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 commonplace. A free CSS classname commonplace may have and would proceed to result in issues, so use this case insensitivity flag sparingly!


author avatar
roosho Senior Engineer (Technical Services)
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 
rooshohttps://www.roosho.com
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Latest Articles

author avatar
roosho Senior Engineer (Technical Services)
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog.