Forum Moderators: not2easy
>Anyway, I've seen a lot of stylesheets that have things like the following snippet all through them:
body>div { /* Rules here */ }
I've never been able to figure out what this is meant to do. So, those of you who are in the know, could you please share what the > is for, how it's used, any compatibility issues, and what the practical application is?
Thanks in advance,
Matthew
body>divdivbody
<html>
<head>
<title>
<style type="text/css">
p {color:green;}
html>body p {color:red;}
</style>
</head>
<body>
<p>What color is this text?</p>
</body></html>IE should get green text, and Gecko/Opera should get red.
So that means a direct child-parent relationship and not just any descendant.
The support in IE is pretty bad, depending on version and/or doctype declaration.
body > div {
The div here is called a "child" selector. That means it appears immediately inside the body element, with nothing intervening.
Much more common is the "descendant" selector, which appears without the "greater than" sign
body div {
This will apply the given style to any div that appears inside "body", no matter how many levels down.
One reason you see the latter more frequently is that IE is not able to read the child selector, so it is much less useful. (Of course, you could use it for a style you wish to use in Firefox but not in IE.)
Maybe I'm missing something though; taking the example from the W3C reference Robert quoted, what makes this:
div ol>li p {color: #00d;}
...any different from this:
div ol li p {color: #00d;}
It seems to me that both would serve the same purpose.
I see the current practical purpose of using the child selectors to give different rules to different browsers, but in a perfect world where all browsers rendered CSS according to standards, what would be the advantage to using one of these techniques instead of the other?
<edit> Never mind, bruhaha answered while I was posting! ;)</edit>
what makes this:div ol>li p {color: #00d;}
...any different from this:
div ol li p {color: #00d;}
In that particular example, there is no difference, because they use the decendant selector to move from the li to the p. So in a nested list like the following...
<ol>
<li><p>Level 1</p>
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
</ul>
</li>
<li><p>Level 2</p>
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
</ul>
</li>
</ol>
...all of the paragraphs are decendant from the LIs which are the direct children of the OL, including the paragraphs inside of the LIs that are inside of the nested ULs (i.e., every paragraph is a decendant of the ordered list). So with or without the child selector (>), it renders all of the paragraphs the same. But change the rule to this...
div ol>li>p{color: blue;}
... and it will style only the paragraphs in the top level LIs blue, leaving the paragraphs in the nested unordered lists, which are decendants but not direct children of the ordered list, alone.
Now I have a headache.
cEM
* htmlAs you may know, the * in CSS selects any element. Since we don't know what that "IE Invisible Element" is, the * works well to target it. But we have to drill down farther than that or else we'd just select any element, regardless of browser. Take the following rule:
* html p {color: #00d;}
This selects any <p> that is nested inside the <html> element, which in turn is nested inside whatever IE thinks that other element is. Hence, IE picks up on this rule and no other browser will.
