Not a valid selector error while porting from jQuery to Zepto

Question

I am trying to use Zepto in jQuery's place for vex.js plugin.

 ".vex:not(".vex-closing") .vex-content"

I am getting below error, while performing above selector.

 error performing selector: ".vex:not(".vex-closing") .vex-content" zepto.min.js:3
 Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.vex:not(".vex-closing") .vex-content' is not a valid selector. 

How can I fix this issue.

Here is the code extracted from vex.js

 getAllVexes: function() { 
    return $("." + vex.baseClassNames.vex + ":not(\"." + vex.baseClassNames.closing + "\") ." + vex.baseClassNames.content);
 }

Answer 1

Quotes aren't normally allowed in the :not() selector, since it accepts a selector, not a string. For whatever reason, though, quotes are allowed in jQuery/Sizzle's implementation of :not().

You should remove the \" marks from your selector string for it to work in document.querySelectorAll() (which Zepto appears to call directly, and use exclusively for selector matching — correct me if I'm wrong):

return $("." + vex.baseClassNames.vex + ":not(." + vex.baseClassNames.closing + ") ." + vex.baseClassNames.content);

This will result in a selector like .vex:not(.vex-closing) .vex-content, which is a valid CSS selector.