JSFiddle - React, Tailwind, and code Playground

by ryanseddon

HTML

<div id="foo">
    <p>first child is paragraph</p>
    <ul>
        <li>List item</li>
    </ul>
</div>

JavaScript

// Working on upgrading a site to 1.8 and it uses MicrosoftMvcJQueryValidation.js 
// which builds a selector $("#id:not(:has(ul:first))") for validation purposes
// This causes sizzle to throw as inside handlePOS it strips it to #id:not(:has(ul

// Infact this happens with any of the custom pseudo-classes defined in rposgroups


var nested = [];

// This is the exact selector that dies
try {
    nested.push($("#foo:not(:has(ul:first))"));
} catch(e) {
    nested.push("#foo:not(:has(ul:first)): failed");
}

// Same selector but using another custom pseudo-class found within rposgroups
try {
    nested.push($("#foo:not(:has(ul:odd))"));
} catch(e) {
    nested.push("#foo:not(:has(ul:odd)): failed");
}

// Simplified selector that still fails
try {
    nested.push($("#foo:has(ul:first)"));
} catch(e) {
    nested.push("#foo:has(ul:first): failed");
}

// Same as first selector but using first-child to show it doesn't throw
try {
    nested.push($("#foo:not(:has(ul:first-child))"));
} catch(e) {
    nested.push("#foo:has(ul:first-child): failed");
}

console.log(nested);