Child combinator `>` inside `:not()` is not a valid selector

Open Nivani opened this issue 2 years ago • 0 comments

The following selector throws an error using nwsapi, but not in a web browser:

button:not(.k-dropdownlist > .k-button):not(.k-colorpicker > .k-button)

This selector is used by Kendo UI, a commercial component library.

I was able to narrow it down to the use of the child combinator > inside :not().

Node.js script that reproduces the issue:

const jsdom = require("jsdom");

const dom = new jsdom.JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
const selectors = [
  "button:not(.k-dropdownlist > .k-button):not(.k-colorpicker > .k-button)",
  "button:not(.k-dropdownlist > .k-button)",
  "button:not(.k-dropdownlist)",
  ".k-dropdownlist > button.k-button",
];

selectors.forEach((selector) => {
  try {
    dom.window.document.querySelectorAll(selector);
    console.log(`✅ Selector "${selector}" is ok`);
  } catch (e) {
    console.log(`❌ Selector "${selector}" throws an error:`, e.message);
  }
});

Output:

❌ Selector "button:not(.k-dropdownlist > .k-button):not(.k-colorpicker > .k-button)" throws an error: 'button:not(.k-dropdownlist > .k-button):not(.k-colorpicker > .k-button)' is not a valid selector
❌ Selector "button:not(.k-dropdownlist > .k-button)" throws an error: 'button:not(.k-dropdownlist > .k-button)' is not a valid selector
✅ Selector "button:not(.k-dropdownlist)" is ok
✅ Selector ".k-dropdownlist > button.k-button" is ok

Tested with Node v20.9.0

I've seen other issues where selectors broke when upgrading from 2.2.2 to 2.2.3, but these don't work in 2.2.2 either.

Mar 06 '24 10:03 Nivani