JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

CSS

.parent div {
    display: block;
    height: 50px;
    width: 50px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 10px;
    line-height: 50px;
    background: #999;
    color: white;
}

div:nth-child(3) { /* It works properly */
    background: orange;
}

div.container:nth-child(2) { /* this won't work because the nth-child won't find the 2nd number of element
    matching div.container */
    background-color: green;
}


div.container:nth-child(n+3) { /* n = 0 for the first div element, not for the first div.container
    Hence, all div.container elements will be selected*/
    background: red;
}