JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box nth1"> <span>:nth-child(3n+0)</span>
 <span>second child</span>
 <span>third child</span>
 <span>fourth child</span>
 <span>fifth child</span>
 <span>sixth child</span> 
</div>

<div class="box nth2"> <span>:nth-child(2n+0)</span>
 <span>second child</span>
 <span>third child</span>
 <span>fourth child</span>
 <span>fifth child</span>
 <span>sixth child</span>

</div>
<div class="box nth3"> <span>:nth-last-child(2n+0)</span>
 <span>second child</span>
 <span>third child</span>
 <span>fourth child</span>
 <span>fifth child</span>
 <span>sixth child</span>

</div>
<div class="box nth4"> <span>:nth-of-type(2)</span>

    <div class="span">first div</div> <span>second span</span>
 <span>third span</span>
 <span>fourth span</span>

    <div class="span">second div</div>
</div>
<div class="box nth5"> <span>:nth-last-of-type(2)</span>

    <div class="span">first div</div> <span>second span</span>
 <span>third span</span>
 <span>fourth span</span>

    <div class="span">second div</div>
</div>
<div class="box nth6"> <span>:first child</span>

    <div class="span">first div</div> <span>second span</span>
 <span>third span</span>
 <span>fourth span</span>

    <div class="span">second div</div>
</div>
<div class="box nth7"> <span>:last-child</span>

    <div class="span">first div</div> <span>second span</span>
 <span>third span</span>
 <span>fourth span</span>

    <div class="span">second div</div>
</div>
<div class="box nth8"> <span>:first-of-type (span)</span>

    <div class="span">first div</div> <span>second span</span>
 <span>third span</span>
 <span>fourth span</span>

    <div class="span">second div</div>
</div>
<div class="box nth9"> <span>:last-of-type (span)</span>

    <div class="span">first div</div> <span>second span</span>
 <span>third span</span>
 <span>fourth span</span>

    <div class="span">second div</div>
</div>
<div class="box nth10"> <span>NOT an only-child</span>

    <div><p>:only-child</p>
    </div>
</div>

<div class="box...

CSS

.box {
    width:150px;
    height:100px;
    display:inline-block;
    border-style: dotted;
    border-width: 1px;
    font-family: monospace;
    font-size: 9pt;
    vertical-align: top;
    margin: 3px;
    box-sizing: border-box;
    line-height: 110%;
    transition: all 1s;
    overflow: hidden;
}
span, .span {
    display: block;
}
.nth1 :nth-child(3n+0), 
.nth2 :nth-child(2n+0), 
.nth3 :nth-last-child(2n+0), 
.nth4 div:nth-of-type(2), 
.nth5 div:nth-last-of-type(2), 
.nth6 :first-child, 
.nth7 :last-child, 
.nth8 span:first-of-type, 
.nth9 span:last-of-type, 
.nth10 :only-child,
.nth11 span:only-of-type,
.nth12 :not(:first-child){
    color:red;
}

JavaScript

// by Troy Whorten 3/7/2014