HTML and CSS Reference
In-Depth Information
The top-level element in this example is body . Below it, there is an h1 element, which has
a child em element. The em is a descendant of body , but body is not its parent ( h1 is its parent).
The h1 element is both a child and a descendant of body , and it is the parent of em . Similarly,
there is a paragraph element that has body as a parent and strong as a descendent. Therefore,
the XHTML code can be represented using the element node tree seen in Figure 2-1.
Figure 2-1. An XHTML element node tree
As you might have guessed, the reason for the quick family tree lesson is CSS's ability to
piggyback on this inherent structure of (X)HTML.
Descendant Selectors
Descendant selectors , sometimes called contextual selectors , allow you to create style rules that
are effective only when an element is the descendant of another one. Descendant selectors are
indicated by a space between two elements. As an example, you may want to style only li ele-
ments that are descendants of ul lists (as opposed, say, to those who are part of ol lists). You'd
do so like this:
ul li {
color: blue;
}
This rule will make li text blue—but only when the li is contained within a ul element. So, in
the following code, all li elements would be blue:
<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>
Search WWH ::




Custom Search