JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li>
</ul>
<ul>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li>
</ul>
<ul>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="hr">HR</li>
<li class="a">foo</li>
<li class="hr">HR</li>
</ul>
<ul>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="hr">HR</li>
<li class="hr">HR</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">HR</li><li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">HR</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li...
CSS
.green {color:green;}
ul {margin:10px}
li {list-style:disc;}
JavaScript
$('ul').find('li.hr:eq(4)').addClass('green');