How/why is “ *[attribute^=“string” ” a valid querySelector? (JS bug?)

Question

So, this might be a bug... I mistyped a CSS path to check for elements that had been processed to have a particular onclick function beginning \"ajaxLoad(\"

Answer 1

The reason why most browsers accept the missing closing bracket is that they're all following the same algorithm from CSS specification. There is a discussion about this on the Chromium bugtracker; here's the relevant excerpt from the comment that closed the bug as WontFix:

When you parse the string 'a[b=c' (from the example link), the CSS parser turns that into:

IDENT(A)
SIMPLE [ BLOCK:
    IDENT(B)
    DELIM(=)
    IDENT(C)

The fact that the square-bracket block was unclosed is lost. You can think of this as the parser "auto-closing all unclosed blocks". If you're using a spec-compliant parser, it is literally impossible to detect an unclosed block unless you do a separate ad hoc parsing on your own just for that purpose.

(I know I'm gravedigging an old question here, but since this still comes up from time to time, the link and explanation may be useful.)