Question

If I want to add styling to all p elements inside of a div, why should I use

div > p{

  *style here*

}

as opposed to just

div p{

  *style here*

}

furthermore, if I want to use a pseudo class, why would I then choose to use “>”

div > p:first-child{

  *style here*

}

instead of

 div p:first-child{

   *style here*

 }

Are there any benefits or drawbacks?
what does that operator do?

Answer 1

It’s the direct child, not a recursive match.

CSS

div > p {

}

HTML

<div>
   <p>Match</p>
   <span>
      <p>No match</p>
   </span>
</div>

---

CSS

div p {

}

Markup

<div>
   <p>Match</p>
   <span>
      <p>Match</p>
   </span>
</div>