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

Today, I stumbled upon an issue of the caniuse.com project mentioning the new and upcoming CSS Level 4 selectors.

The list is quite long and there are many new selectors on their way. One new selector flag caugh my eye; the attribute selector will become an i flag which makes it 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.

MDN Compat Data (source)
Browser support info for Case-insensitive modifier (i)
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
4949794747995.049

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 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles