Nth-class selector problem


I was playing around with the nth-class selector and noticed that it was also styling the p that is outside the div and isn't the 3rd child.
I would understand if the 3rd p of the body ended up green, but why is the p right after the div green?

note: I know I could use div p:nth-child(3) to be specific.

<!DOCTYPE html>
      p:nth-child(3) {
    <script src="index.js"></script>
      <p>Not green.</p>
      <p>Not green.</p>
      <p>This is green.</p>
    <p>Why is this green?</p>
    <p>Not green</p>
    <p>Shouldn't this be green?</p>


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.