Choosing a <p> Descendant Using CSS

Question

How is it that the whole result is black by default? No rules accepted! Is it because <p> not allowed to have descendants? Where will such a rule be indicated? Thanks.

Example

HTML

 <div id="id1"> <p>...some text...</p> <p> <p> nested p </p> <span> nested span 1 </span> </p> <span> nested span 2 </span> </div> 

CSS

 p>p {color:red;} p>span {color:yellow;} pp {color:green;} p span {color:blue;} 

Answer 1

This is because <p> not allowed to have children

No, this is because <p> has no children, which are <p> elements (among others).

Where will such a rule be indicated?

In the HTML specification (in the "Content Model" section).

You may find it useful to test your code with a markup verification mechanism .