HTML and CSS Reference
In-Depth Information
Even though the nested list in item four is an
ol
element, the blue color will still be
applied to its list items because they are the descendants of a
ul
.
Descendant selectors can be useful in targeting items deep in your (X)HTML structure,
even when they don't have an ID or class assigned to them. By stringing together many ele-
ments, you can target
strong
elements inside
cite
elements inside
blockquote
elements inside
div
elements:
div blockquote cite strong {
color: orange;
}
You can combine these with your class and ID selectors to get even more specific. Perhaps we
want only
li
elements in
ul
elements with a
class
of
ingredients
inside our
div
with the
id
value
recipes
:
div#recipes ul.ingredients li {
font-size 10px;
}
As you can imagine, descendant selectors are powerful, and it's no coincidence that
descendant selectors are among the most-used types of CSS selectors.
Child Selectors
Child selectors are similar to descendant selectors, but they select only children rather than all
ancestors. Child selectors are indicated by a greater-than sign (
>
).
■
Note
Microsoft Internet Explorer 6 and below does not support child selectors.
Consider our example markup from earlier:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four has a nested list
<ol>
<li>Sub-item one</li>
<li>Sub-item two</li>
</ol>
</li>
</ul>
Whereas our descendant selector,
ul li { color: blue; }
, targeted all
li
elements in this
example, a similar child selector would only select the first four
li
elements, as they are direct
children of a
ul
element:
