Support case-insensitive attribute selectors [attr="value" i]

[chrisblakley]

While I was so happy to see that case-insensitive selectors work with jQuery (Ex: jQuery('[href*="example" i]')), I ran into an issue while updating my code that was listening for a click event with a delegated selector that used an attribute selector (I was upgrading my codebase to use case-insensitive attribute selectors).

So this works:

$('#link-container').on('click', 'a[href*="foo"]', function(){
	//This works
});

This also works:

$('a[href*="baz" i]').on('click', function(){
	//This works
});

But this does not:

$('#link-container').on('click', 'a[href*="bar" i]', function(){
	//This has an error
});

https://codepen.io/chrisblakley/pen/xxROJEq

When clicking on the bottom link, the case-insensitive attribute selector works great. However, the middle link results in the following console error (use your browser's console as the error does not appear in Codepen's provided console).

The top link works fine as long as the middle event listener is completely removed or commented out.

[dmethvin]

There isn't a case-insensitive attribute option for selectors. The i there is not valid and the error you're getting is correct. Both examples that use the trailing i are giving the error.

http://w3c.github.io/html-reference/documents.html#case-insensitivity

Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive.

[chrisblakley]

Just to clarify that the case-insensitive attribute operator i is a fairly recent addition to the Level 4 CSS selectors. I understand that the HTML spec is not case-sensitive, but the CSS attribute selector is unless the i or s flag is included.

• https://www.w3.org/TR/selectors-4/#attribute-case
• https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#case-insensitive
• https://caniuse.com/css-case-insensitive

In the example in my first post the non-delegated jQuery selector does work in modern browsers. As a simplified example here is another Codepen snippet: https://codepen.io/chrisblakley/pen/WNoRBNr?editors=1100

I appreciate your time, thanks.

---

Currently (for anyone who stumbles upon this from Google), you'll need to either use a non-delegated jQuery selector:

$('a[href$=".pdf" i]').on('click', function(){
	//PDF extension was clicked
});

Or comma-separate your delegated selectors with case-sensitivity:

$(document).on('click', 'a[href$=".pdf"], a[href$=".PDF"]', function(){
	//PDF extension was clicked
});

[dmethvin]

Wow, thanks! That is new to me. Also, the case sensitivity here is for the value, not the name of the attribute.

Since jQuery doesn't attempt to fill this new feature, the selector would fail for any situation where the Sizzle engine comes into play. That would be any browser where this CSS4 feature isn't supported, obviously such as IE11, but also in other situations such as a rooted query which isn't supported by native CSS.

[mgol]

I updated the title to be more generic. Also, I created a bigger issue to evaluate CSS Selectors Level 4 support: #5111.