JSFiddle - React, Tailwind, and code Playground

by snover

HTML

<div class="selector_target">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div id="start"></div>
    <h1><span></span></h1>
</div>

<h1>Result:</h1>
<div id="result"></div>

<h1>Expected:</h1>
<div id="expected"></div>

CSS

h1 {
    font-weight: bold;
    margin-top: 1em;
}

JavaScript

var s = $('#start'),
    r = [],
    e = [];

$.each([ ':first-child', ':last-child', ':eq(0)', ':even', ':first', ':gt(0)', ':header', ':last', ':lt(1)', ':not(:first-child)', ':odd' ], function (i, selector) {
    r.push(selector + ' ' + s.parents('.selector_target ' + selector + ' span').length);
    e.push(selector + ' ' + 0);
});
    
$('#result').append(r.join('<br>'));
$('#expected').append(e.join('<br>'));