Remove a specific class from an element in HTML

I want to remove a class from a nested element in HTML.

<div class=sample>

<p>This should have the class as sample</p>

<p>This should not have the class as sample</p>

</div>

In the above snippet, I dont want to let the second <p> element to have the class sample. How can i do so?

>Solution :

You might like to try playing with the :not pseudo selector combined with :nth-child

.sample > p:not(:nth-child(2)){
  color:red;
  background:yellow
}

<div class='sample'>

  <p>This should have the class as sample</p>

  <p>This should not have the class as sample</p>

</div>