[cssom][css-escape][css-selectors]: Using CSS.escape with nth-child

[jridgewell]

We've just gone though our codebase to enforce using CSS.escape on any dynamic parts of a selector. The only caveat we've found so far is with :nth-child and friends, due to the very limited set of parsing of An+b

// Works fine
querySelector(`div.${CSS.escape(3)}`);

// Throws parse error
querySelector(`div:nth-child(${CSS.escape(3)})`);

Is CSS.escape meant to handle this situation? Or, should the An+b syntax be loosened to allow escaped numbers?

[Loirooriol]

CSS.escape is not a magical function. It just serializes a string as a CSS identifier. :nth-child does not expect an identifier argument so it won't work.

I would just do something like

a = a >> 0; // ToInt32(a)
b = b >> 0; // ToInt32(b)
querySelector(`div:nth-child(${a}n ${b < 0 ? "-" : "+"} ${Math.abs(b)})`);