The CSS attribute selector has a case-insensitive mode (#tilPost)

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…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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;
}

Only downside is, that Edge is not supporting this selector yet.

If you want to play around with this, I created a quick codepen. The only case I can think of this for this is when you have to deal with user-generated content, and the possibility is quite high the users enter not accurate data. Would love to learn more about other use cases for this – 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] { /* ... */ }

Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-01-27T01:52:04+00:00) » The CSS attribute selector has a case-insensitive mode (#tilPost). Retrieved from https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/.
MLA
" » The CSS attribute selector has a case-insensitive mode (#tilPost)." Stefan Judis | Sciencx - Friday September 7, 2018, https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/
HARVARD
Stefan Judis | Sciencx Friday September 7, 2018 » The CSS attribute selector has a case-insensitive mode (#tilPost)., viewed 2023-01-27T01:52:04+00:00,<https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » The CSS attribute selector has a case-insensitive mode (#tilPost). [Internet]. [Accessed 2023-01-27T01:52:04+00:00]. Available from: https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/
CHICAGO
" » The CSS attribute selector has a case-insensitive mode (#tilPost)." Stefan Judis | Sciencx - Accessed 2023-01-27T01:52:04+00:00. https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/
IEEE
" » The CSS attribute selector has a case-insensitive mode (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/. [Accessed: 2023-01-27T01:52:04+00:00]
rf:citation
» The CSS attribute selector has a case-insensitive mode (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2018/09/07/the-css-attribute-selector-has-a-case-insensitive-mode-tilpost/ | 2023-01-27T01:52:04+00:00
https://github.com/addpipe/simple-recorderjs-demo