Taming Advanced CSS Selectors - CSS Essentials - page 236

another level of usability to your site, but the site will still be usable if the
links don't show any icons.
2. Child selector
The child selector is represented by the sign “ > ”. It allows you to target
elements that are direct children of a particular element.
For example, if you want to match all the h2 elements that are a direct child
of your sidebar div , but not the h2 elements that may be also within the
div , but that are grandchildren (or later descendants) of your element, you
can use this selector:
div#sidebar > h2 {
font-size: 20px;
}
You can also use both child and descendant selectors combined. For
example, if you want to target only the blockquote elements that are
within div s that are direct grandchildren of the body element (you may
want to match blockquotes inside the main content div , but not if they are
outside it):
body > div > div blockquote {
margin-left: 30px;
}
Notes on browser support
Like the attribute selectors, the child selector is not supported by Internet
Explorer 6. If the e " ect you are trying to achieve by using it is crucial for the
website's usability or overall aesthetics, you can consider using a class
selector with it, or on a IE-only stylesheet, but that would detract from the
purpose of using child selectors.