Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

I'm following the 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

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] { /* ... */ }
Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.