<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 nth11"> :only-of-type (span) <br><br> <div> <span>only span</span> </div> <br> <div> <span>first span</span> <span>second span</span> </div> </div> <div class="box nth12"> <span>:not(: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>
.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; }
// by Troy Whorten 3/7/2014