JSFiddle - React, Tailwind, and code Playground

by masaab algailani

HTML

<div id="nchildChk">
    <p>I am p1</p>
    <span>I am a span</span>
    <p>I am p2</p>
    <p>I am p3</p>
    <p>I am p4</p>
<div>
    --------------------------------
<div id="nType">
    <p>I am p1</p>
    <span>I am a span</span>
    <p>I am p2</p>
    <p>I am p3</p>
    <p>I am p4</p>
</div>

CSS

/*This wont work as the second element of the parent is a span
But if we remove the span element the p element is again going to be the 
second element*/
/*The '#nchildChk' makes sure only the div with with that name is is styled applied*/
#nchildChk p:nth-child(2){
    color:red;
}
/*This works as it find the second element of type p in the parent. 
More Strict than nth-child*/
#nType p:nth-of-type(2){
    color:red;
    
}