CODEWITHSUNDEEP
htmlcsscss-selectors
cyrusthegreat
cyrusthegreat

Reputation: 25

CSS * Selector Weird treatment

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?

Upvotes: 0

Views: 180

Answers (2)

Anubhav Agarwal
Anubhav Agarwal

Reputation: 2062

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.

Upvotes: 4

mikevoermans
mikevoermans

Reputation: 4007

I assume its because of the poor markup. Browsers tend to close certain tags. You have a p tag wrapping another p tag. So the browser might close it for you and start a new one, which is possibly messing up your CSS selector.

<p><div>should be red?</div></p>
<p>just text won't be red</p>

Upvotes: 0

Related Questions