Nth-class selector problem


#1


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>
<html>
  <head>
    <style>
      p:nth-child(3) {
        color:green;
      }
    </style>
  </head>
  <body>
    <script src="index.js"></script>
    <div>
      <p>Not green.</p>
      <p>Not green.</p>
      <p>This is green.</p>
    </div>
    <p>Why is this green?</p>
    <p>Not green</p>
    <p>Shouldn't this be green?</p>
  </body>
</html>


#2

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