JSFiddle - React, Tailwind, and code Playground

by rathoreahsan

HTML

<div class='message1'>
 <p>hello</p> 
 <p>I am in Red</p>
 <p>hello</p>
 <p>I am in Red</p>
 <p>hello</p>
 <p>I am in Red</p>
 <p>hello</p>
 <p>I am in Red</p>   
</div>
<br />
<br />
<div class='message2'>
 <p>hello</p>
 <p>I have no effects</p>
 <p>hello</p>
 <p>I have no effects</p>
 <p>hello</p>
 <p>I have no effects</p>   
</div>
<br />
<br />
<div class='message3'>
 <p>hello</p>
 <p>world!</p>
 <p>I am in blue</p>
</div>

JavaScript

// Will apply css on every third child paragraph
$('.message1 p:nth-child(2n+2)').css({"color" : "red"});
    
//Will not work as it doesn't except nth value. It only accept fixed value
$('.message2 p:eq(2n+2)').css({"color" : "blue"});

//Will only Work with fixed Value and it will point actually 3rd child.
$('.message3 p:eq(2)').css({"color" : "blue"});