Question

I’m doing some researches about browsers and their treat to the css and html codes, test this and see weird result and couldn’t understand. it’s a research. so it’s not a real code.

I notice a problem when using CSS * selector. Let me explain:

See below example:

p * { color:red; }

It means that all the tags inside of a p element, must be red.
some examples:

<p>
<div>
text <!-- Must be red but not !-->
</div>
<p>
text <!-- Must be red but not !-->
</p>
<span>
text <!-- Must be red but not !-->
</span>
</p>

Dose these problem has any reasons? Logical reasons?

Answer 1

The W3 XHTML validator will ding you for using nested p tags.
Think about it for a brief moment: “a paragraph within a paragraph.”. Syntactically, a div inside a p is invalid in all standards of HTML. Moreover, when using a conforming HTML parser, it is impossible to place a div element inside a p in the DOM because the opening div tag will automatically close the p element. You can see more details here

You can however use inline tags such as span if you want to style elements in your paragraph.