JSFiddle - React, Tailwind, and code Playground

HTML

<h3> Body starts a new parent<h3>
<body>
    <p>First Paragraph Child of Body</p>
    <p>Second Paragraph Child of Body</p>
    <p>Third Paragraph Child of Body</p>
    <p>Fourth Paragraph Child of Body</p>
    <p>Fifth Paragraph Child of Body</p>
    
<h3> Footer starts a new parent<h3>
<footer>
    <p>First Paragraph Child of Footer. but am the sixth paragraph child of html</p>
    <p>Second Paragraph Child of Body</p>
</footer>
</body>

CSS

/* This will select the third child if three or more exist in the parent container */
p:nth-child(3) {
  color: blue;
}
/* This will select every 2nd child */
p:nth-child(2n+1) {
  color: red;
}