Check if CSS selector is valid

Question

I have a field for users to input a CSS selector and I want to check if it's valid (according to css3 specification). I tried to use expressions from css3 specification as suggested in another stackoverflow topic, but it didn't work - the regexp I built just didn't match valid selectors. What I have for now is simply:

try {
     document.querySelector(selector);
} catch (e) {
     // handle bad input
}

But it doesn't seem like a good solution - querySelector function is designed for getting elements, and checking of selector is just a side effect. Furthermore it doesn't provide any information about what is wrong with the selector.

What I'm looking for is something like document.validateSelector or library for parsing CSS selectors.

What's wrong with the way you're doing it? This is the preferred approach as far as I know. — user663031
– user663031, Commented Jan 18, 2016 at 7:13
How are users inserting the selector? For example, for a class are the inputing .className? Basically, are you prefixing the selector with the appropriate identifier for class or id? — Brett DeWoody
– Brett DeWoody, Commented Jan 18, 2016 at 7:15
@Brett DeWoody, yes, they're supposed to type selectors just like in .css files, I don't change it in any way. — Vlad Shevchenko
– Vlad Shevchenko, Commented Jan 18, 2016 at 7:19
@torazaburo, well, it does work, but it just seams wrong) document.querySelector is not for that. In fact I'm just curious is there a more elegant solution. — Vlad Shevchenko
– Vlad Shevchenko, Commented Jan 18, 2016 at 7:31
It's fine. You're using try to pick up an error which is reported by a throw, which is how querySelector reports errors. The only reason to not use this and prefer some other solution is if you wanted details such as the type of error or its character position. — user663031
– user663031, Commented Jan 18, 2016 at 7:37

kornieff · Accepted Answer · 2022-01-18 22:06:16Z

38

The problem with original idea is that it will search the entire document. Slow 🤨 !

However, searching an empty light-weight element that is not even attached to the DOM is fast ✌️!

const queryCheck = (s) => document.createDocumentFragment().querySelector(s)

const isSelectorValid = (selector) => {
  try { queryCheck(selector) } catch { return false }
  return true
}

console.assert(isSelectorValid('p > > > a') === false)
console.assert(isSelectorValid('p > a') === true)
console.log('Test passed')

The following version is a bit more advanced with dummy fragment enclosure:

const isSelectorValid = ((dummyElement) =>
  (selector) => {
    try { dummyElement.querySelector(selector) } catch { return false }
    return true
  })(document.createDocumentFragment())
  
console.assert(isSelectorValid('p > > > a') === false)
console.assert(isSelectorValid('p > a') === true)
console.log('Test passed')

edited Jan 18, 2022 at 22:06

answered Feb 10, 2017 at 1:04

kornieff

2,57721 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ey dee ey em Over a year ago

this should be the best answer

Dmitri Pavlutin · Accepted Answer · 2016-01-18 07:15:48Z

1

You can use a library to verify if the selector is valid, and probably get more details from parsing. Check the css selector parser.

answered Jan 18, 2016 at 7:15

Dmitri Pavlutin

19.3k8 gold badges41 silver badges46 bronze badges

2 Comments

user663031 Over a year ago

There's already a library, it's the CSS selector parser built into the browser. That "library" reports errors by throwing. I don't see any reason to bring in another parser.

Dmitri Pavlutin Over a year ago

Why generate runtime errors, if it is possible to avoid them. A library can give more details on an invalid selector. document.querySelector(selector) is designed to query the DOM, but not to check the selector validity.

Félix · Accepted Answer · 2020-03-09 10:34:04Z

1

Thanks to @kornieff hint, I've reached out to an answer for nodejs using jsdom, if it can help anyone :

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM('')).window;

const queryCheck = s => document.createDocumentFragment().querySelector(s)

const isSelectorValid = selector => {
  try { queryCheck(selector) } catch { return false }
  return true
}
console.log(isSelectorValid("a#x#y"), isSelectorValid("a?+"));

answered Mar 9, 2020 at 10:34

Félix

1548 bronze badges

Comments

woxxom · Accepted Answer · 2022-03-01 04:13:03Z

Since querySelector and CSS.supports('selector('+s+')') accept unclosed input like a[href="foo,
let's use the built-in CSSStyleSheet API to check the selector can be used in a CSS rule:

let isv;
function isSelectorValid(sel) {
  if (!isv) {
    try {
      // Chrome 73 and newer
      isv = new CSSStyleSheet();
    } catch (e) {
      // This will fail on sites with an unusually strict CSP that forbids inline styles,
      // so you'll need to set `nonce` or reuse an existing `link` element.
      isv = document.head.appendChild(document.createElement('style')).sheet;
      isv.disabled = true;
    }
  }
  let res = false;
  try {
    // the leading space skips selector's trailing escape char
    const body = ` { --foo: "${Math.random()}"; }`;
    isv.insertRule(sel + body);
    res = isv.cssRules[0].cssText.endsWith(body);
    isv.deleteRule(0);
  } catch (e) {}
  return res;
}

user1032752 · Accepted Answer · 2024-11-15 01:47:59Z

0

Not sure it would cover all edge cases but using CSS.escape on an invalid selector returns an empty NodeList instead of throwing a syntax error.

document.querySelectorAll(CSS.escape('p > > > a')) => NodeList []
document.querySelectorAll(CSS.escape('a?+')) => NodeList []

answered Nov 15, 2024 at 1:47

user1032752

8911 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Check if CSS selector is valid

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related