JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="foo">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

<hr>

<ul class="yo">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

CSS

.foo li:nth-child(even){
   background: blue;   
}

.foo li:nth-child(2){
    background: green;
}

.foo li:nth-of-type(4){
    background: yellow;
}

JavaScript

// Event: what the...
$(".yo li:even").css({background:"red"});

// Nth: what the...
$(".yo li:nth(2)").css({background:"green"});

// Nth of type: correct!
$(".yo li:nth-of-type(4)").css({background:"yellow"});