-1

I have found two selectors

div p

and 

div>p

What is the exact difference between these two css selectors?

2 Answers2

7
  • The first is "descendant" selector: p anywhere inside div

div p {
  color: red;
}
<div>
  Div
  <p>Child</p>
  <aside>
    <p>Grandchild</p>
  </aside>
</div>
  • The second is "child" selector: p directly under div

div > p {
  color: red;
}
<div>
  Div
  <p>Child</p>
  <aside>
    <p>Grandchild</p>
  </aside>
</div>
Amadan
  • 191,408
  • 23
  • 240
  • 301
0

div p this style will select all the p elements under the div whether the p is inside another div. The div>p will only select the p which are under the div. if there is another div into the same div which has p element as well it will not select that p.

Sumit Kumar
  • 493
  • 2
  • 5
  • 16
  • 1
    "If there is another div into the same div which has p element as well it will not select that p." Sure it will, just not picking the same start element. In `

    P

    `, `div > p`, `div p`, `div#root p` will all select the `

    `; `div#root > p` will not select it.

     – Amadan Jul 10 '18 at 06:29
  • yeah absolutely right ;) – Sumit Kumar Jul 10 '18 at 06:32