Trying style for the 1st & p & gt; element in the div using sass with the same class

advertisements

Below is my code. With that 2nd <p> is becoming bold. I just need first <p> bold only. I don't want to add any class for 1st <p>.

    .person {
      p + p {
        font-weight: bold;
      }
    }
<div class="person">
          <p>I am good</p>
          <p>You are also good</p>
        </div>

.person p:first-of-type { } or even .person p:first-child { } would work. The selector you are using literally translates to "A Paragraph immediately following a Paragraph within class .person"