Search code examples
jqueryformscss-selectors

Why am I getting “Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: is” when using “:first:is”

I am trying to select an empty form date element (first element) using jQuery 3.7.1 but I am constantly getting errors with this command and using this CSS selector. The error is this:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: is

The jQuery command and CSS selector is this:

$('#the_form').find("input[type='date'][name='the_date[]']:first:is(input[value=''])");

I am testing and developing with Firefox 119.0.1 (64-bit) on macOS Sonoma (14.1.1; 23B81). Why the heck am I getting this “unsupported pseudo: is” error?

Solution

  • Use :first-of-type:is instead of :first:is.

    I don’t know why the initial error shows up, but it resolves itself when I using :first-of-type:is instead of :first:is:

    $('#the_form').find("input[type='date'][name='the_date[]']:first-of-type:is(input[value=''])");

    It seems like the issue is with :is and with the Sizzle CSS selector engine. The issue is documented here and apparently will be addressed in jQuery 4.0? Who knows! For now, :first-of-type works with :is for my usage.

    Hopefully this will help someone else as well!