The CSS attribute selector has a case-insensitive mode
- Published at
- Updated at
- Reading time
- 1min
I'm following the caniuse.com project on GitHub which means I get notifications about additions to the web platform and updated browser support. Today, I stumbled upon an issue including new CSS Level 4 selectors that are or will be included on caniuse.com.
It turns out there are a lot of new selectors on their way, and one interesting one is a flag which makes attribute selectors case-insensitive.
/**
* matches:
* <div class="foo">...</div>
* <div class="Foo">...</div>
* <div class="fOo">...</div>
* ...
*/
[class=foo i] {
color: red;
}
The browser support's looking good as well.
If you want to play around with it, I created a quick codepen. The only case I can think of this being useful is when you have to deal with user-generated content, and the possibility is quite high the users enter not accurate data. I would love to learn more about other use cases – if you have an idea, please let me know!
Edited: Dominik pointed out that this could be indeed useful for user-generated content in input fields using the value
attribute.
/**
* matches:
* <input value="hello world">
* <input value="hello World">
* <input value="hElLo WoRlD">
* ...
*/
[value="hello world" i] { /* ... */ }
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 18 days ago.