JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<h1>Legend</h1>
<div id="legend">
    <p class="sel1">This <code>p</code>'s first <code>span</code> contains the letter a. Should match all but second <code>p</code>.</p>
    <p class="sel2">This <code>p</code>'s last (second) <code>span</code> contains the letter a. Should match all.</p>
    <p class="sel3">This <code>p</code>'s second <code>span</code> contains the letter a. Should match all.</p>
    <p class="sel4">This <code>p</code>'s nonexistent third <code>span</code> contains the letter a. Should match none.</p>
    <p class="sel5">This <code>p</code>'s nonexistent third <code>span</code> contains the letter z. Should match none.</p>
</div>
<hr>
<h1>Using <code>.has()</code> method, works as expected</h1>
<div id="has-method">
    <p>
        <span>a</span>
        <span>paragraph</span>
    </p>
    <p>
        <span>b</span>
        <span>paragraph</span>
    </p>
    <p>
        <span>a</span>
        <span>paragraph</span>
    </p>
    <p>
        <span>a</span>
        <span>paragraph</span>
    </p>
</div>
<hr>
<h1>Using <code>:has()</code> selector, blows up</h1>
<div id="has-selector">
    <p>
        <span>a</span>
        <span>paragraph</span>
    </p>
    <p>
        <span>b</span>
        <span>paragraph</span>
    </p>
    <p>
        <span>a</span>
        <span>paragraph</span>
    </p>
    <p>
        <span>a</span>
        <span>paragraph</span>
    </p>
</div>

CSS

h1 { font-weight: bold; }

.sel1 { color: #f00; }
.sel2 { background-color: #ff0; }
.sel3 { font-style: italic; }
.sel4 { color: #00f; }
.sel5 { color: #f0f; }

JavaScript

$('#has-method p').has('span:first-child:contains("a")')
    .addClass('sel1');

$('#has-method p').has('span:last-child:contains("a")')
    .addClass('sel2');

$('#has-method p').has('span:nth-child(2):contains("a")')
    .addClass('sel3');

$('#has-method p').has('span:nth-child(3):contains("a")')
    .addClass('sel4');

$('#has-method p').has('span:nth-child(3):contains("z")')
    .addClass('sel5');

// --------------------------------------------------

// Actually matches
// #has-selector p:first-child:has(span:contains("a"))
$('#has-selector p:has(span:first-child:contains("a"))')
    .addClass('sel1');

// Actually matches
// #has-selector p:last-child:has(span:contains("a"))
$('#has-selector p:has(span:last-child:contains("a"))')
    .addClass('sel2');

// Actually matches
// #has-selector p:nth-child(2):has(span:contains("a"))
$('#has-selector p:has(span:nth-child(2):contains("a"))')
    .addClass('sel3');

// Actually matches
// #has-selector p:nth-child(3):has(span:contains("a"))
$('#has-selector p:has(span:nth-child(3):contains("a"))')
    .addClass('sel4');

// Actually matches
// #has-selector p:nth-child(3):has(span:contains("z"))
$('#has-selector p:has(span:nth-child(3):contains("z"))')
    .addClass('sel5');