JSFiddle - React, Tailwind, and code Playground

by AlistairB

HTML

<ul>
    <li></li>
    <li class="whatever" id="foo" >bar</li>
    <li></li>
</ul>
<div>
    <span class="test done"></span>
</div>
<div>
    <span class="test"></span>
</div>

<div id="output"></div>

CSS

body {
    font-family: Monaco, Courier;
}
ul { display:none; }
.e { color: red }

JavaScript

var test = [
 {   name: "ul:has(li)",
      obj: jQuery( "ul:has(li)" ),
   expect: 1 
 },
 {   name: "li:eq(2)",
      obj: jQuery( "li:eq(1)" ),
   expect: 1 
 },
 {   name: "ul:has(li:eq(2))",
      obj: jQuery( "ul:has(li:eq(2))" ),
   expect: 1 
 },  
 {   name: 'jQuery( "ul" ).has( "li:eq(2)" )',
      obj: jQuery( "ul" ).has( "li:eq(2)" ),
   expect: 1 
 },
 {   name: "li:gt(1)",
      obj: jQuery( "li:gt(1)" ),
   expect: 1 
 },
 {   name: "ul:has(li:gt(1))",
      obj: jQuery( "ul:has(li:gt(1))" ),
   expect: 1 
 },  
 {   name: 'jQuery( "ul" ).has( "li:gt(1)" )',
      obj: jQuery( "ul" ).has( "li:gt(1)" ),
   expect: 1 
 },
 {   name: "li:lt(1)",
      obj: jQuery( "li:lt(1)" ),
   expect: 1 
 },
 {   name: "ul:has(li:lt(1))",
      obj: jQuery( "ul:has(li:lt(1))" ),
   expect: 1 
 },
 {   name: 'jQuery("ul").has("li:lt(1)")',
      obj: jQuery( "ul" ).has( "li:lt(1)" ),
   expect: 1 
 },
 {   name: "li:not(.whatever)",
      obj: jQuery( "li:not(.whatever)" ),
   expect: 2 
 },
 {   name: "ul:has(li:not(.whatever))",
      obj: jQuery( "ul:has(li:not(.whatever))" ),
   expect: 1 
 },
 {   name: 'jQuery( "ul" ).has( "li:not(.whatever)" )',
      obj: jQuery( "ul" ).has( "li:not(.whatever)" ),
   expect: 1 
 },
 {   name: "div:has(.test:not(.done))",
      obj: jQuery( "div:has(.test:not(.done))" ),
   expect: 1 
 },
 {   name: "div:has(:not(.done).test)",
      obj: jQuery( "div:has(:not(.done).test)" ),
   expect: 1 
 },
 {   name: "ul:has(li:not(#foo))",
      obj: jQuery( "ul:has(li:not(#foo))" ),
   expect: 1 
 },
 {   name: "ul:has(li:contains(bar))",
      obj: jQuery( "ul:has(li:contains(bar))" ),
   expect: 1 
 },
 {   name: "ul:has(li:contains(nup))",
      obj: jQuery( "ul:has(li:contains(nup))" ),
   expect: 0 
 },
 {   name: "ul:has(li:not(:contains(nup))",
      obj: jQuery( "ul:has(li:not(:contains(nup))" ),
   expect: 1 
 },
 {   name: "ul:has(.whatever:contains(bar))",
      obj: jQuery( "ul:has(.whatever:contains(bar))" ),
   expect:...