Why does descendent selector "p p" not work?

Asked Jul 21 '20 at 15:40

Active Jul 21 '20 at 15:42

Viewed 30 times

I am testing out descendant selector priorities, and so I have this code:

p p {background-color: blue}
p {background-color: purple}

However, it seems that even if I nest <p> inside another <p> it's always purple. When I tried it with span (span span), the descendant selector double span took priority over the single span. In this case, the <p> is never blue. Can someone tell me why?

edited Jul 21 '20 at 15:42

Temani Afif

245,468
26
309
415

asked Jul 21 '20 at 15:40

Hello World

3

p inside p isn't allowed – Temani Afif Jul 21 '20 at 15:41
@TemaniAfif Are there other rules like this that isn't allowed? Or if you could point be somewhere would be nice. The information I saw on descendant selectors never mentioned this. – Hello World Jul 21 '20 at 15:42
Saw your edit, thanks – Hello World Jul 21 '20 at 15:44
In your CSS you have written " p p {background-color: blue}" in first line it should be after "p {background-color: purple}" . – Ajay Malhotra Jul 21 '20 at 16:02
@AjayMalhotra No I wrote in same order for span but it worked, the descendant should have higher priority. – Hello World Jul 21 '20 at 16:51
Yes you are correct – Ajay Malhotra Jul 22 '20 at 04:55

Why does descendent selector "p p" not work?

0 Answers0