JSFiddle - React, Tailwind, and code Playground

by Dimitry Nazarov

HTML

<div id="foo">
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>    
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>    
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>    
    <a href="#">
        <div class="bar">bar</div>
    </a>
    <a href="#">
        <div class="bar">bar</div>
    </a>    
</div>

CSS

#foo a div.bar:first-child{
    background-color:green;
    color:yellow;
}

JavaScript

//$('#foo .bar:nth-child(4n+1)');