Forum Moderators: not2easy
A couple of time I have come across greater than and less than signs in CSS tags and I can't find a resource that explains what they do. This is quite hard to google.
As i remember it was in the form:
selector > selector{
attribute: value
}
Does any idea what this is and how it is useful?
selector[1] > selector[2]{
[property]: value
}
This is called the child selector [w3.org]. In browsers that support it (all but IE), it applies the styles to selector2 child elements of selector1.
For instance, if you had this code...
html:
<div id="box">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
...and you wanted all of the paragraphs in it to have blue text, you could use the child selector...
css:
#box > p{
color:blue;
}
...which applies it's styles to all the <p> children of #box. This is similar to the decendant selector [w3.org]...
css:
#box p {
color:blue;
}
...which in this situation would work identically, but it's a little different. The decendant selector will apply to ALL decendants (elements nested in any element that is nested in #box), whereas the child selector applies only to the direct children of the parent (elements nested in #box).
NOTE: This page [w3.org] has a fairly clear, one line description that identifies the difference somewhat better than I.
We'll need slightly more complicated code to see this...
html:
<div id="box">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
Applying the same CSS to this, the child selector would color only the first two paragraphs blue, but would leave the other two, the one's inside of the non-IDed div, at the default text color. The descendant selector, however, would color all four paragraphs blue since they are all decendants (two children, two grandchildren) of the parent #box.
Going by this "official" application, the child selector's usefulness is limited to situations in which the order of nesting requires applying styles to child elements but not grand- (or great-grand) child elements.
It has another use, however, that stems from IE's conspicuous lack of support for it.
Since no IE browser recognizes the child selector, it is often used as a way to feed other browsers style information that must be hidden from IE. There's a good chance that this is what it is doing in the code you've seen.
cEM
PS: WELCOME TO WebmasterWorld!
In other words, if you wish to specify that the style you are about to describe should be applied onlyif the selector is the immediate child (in the document tree) of another, you describe it as, e.g.,
body > p
Of course, the 'less than' sign is used to describe the reverse, i.e., to apply the style only when the selector is the immediate parent of the selector listed first.
Much of the time, you see the more general form of descendant selectors, where NO sign is placed between, e.g.,
div div {
(to be applied only if the div --or whatever selector-- is descended from another div).
In this second case, the code does not specify whether it is an IMMEDIATE or distant descendant --so long as the second selector it is found within the first.
(There is also the form "selector * selector" which specifies that the first is GRANDparent to the second, i.e., the descendant must be precisly TWO steps removed from the first. I haven't seen this one much.)
To see the more detailed explanation of the W3C specifications for CSS 2 -- go to [w3.org...]
Suzy
