Why use “>” in CSS?

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>

Answer 2

Because it means direct child.

Your second example would match the p in this example

<div>
  <header>
    <p>
    </p>
  </header>
</div>

Answer 3

> and (space) are relationship selectors meaning "child" and "descendant" respectively. On top of the semantic differences others have pointed out, a child selector computes faster as it avoids redundant DOM tree traversal on non-matching elements.