0

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?

cyrusthegreat
  • 25
  • 3

2 Answers2

4

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.

Community
  • 1
  • 1
Anubhav Agarwal
  • 1,982
  • 5
  • 28
  • 40
0

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>
mikevoermans
  • 3,967
  • 22
  • 27
  • The div won't be red either, for the same reason. – BoltClock Mar 17 '12 at 14:07
  • And browsers "tend to close certain tags" because they have to - it's a hard requirement of the specs. What they should do with the dangling `` in the example however, that is something else. – Mr Lister Mar 17 '12 at 14:40