HTML and CSS Reference
In-Depth Information
Because the two rules have equal weight and the “red” rule is written last, it wins out
and the span is red. The fact that the div class="aside" is “closer to” the span than the
div class="help" is completely irrelevant. Again: descendant selectors have no notion
of element proximity. Both rules match, only one color can be applied, and due to the
way CSS works, red is the winner here.
Selecting Children
In some cases, you don't want to select an arbitrarily descended element; rather, you
want to narrow your range to select an element that is a child of another element. You
might, for example, want to select a strong element only if it is a child (as opposed to
any level of descendant) of an h1 element. To do this, you use the child combinator,
which is the greater-than symbol ( > ):
h1 > strong {color: red;}
This rule will make red the strong element shown in the first h1 below, but not the
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
Read right to left, the selector h1 > strong translates as, “Selects any strong element
that is a child of an h1 element.” The child combinator can be optionally surrounded
by whitespace. Thus, h1 > strong , h1> strong , and h1>strong are all equivalent. You
can use or omit whitespace as you wish.
When viewing the document as a tree structure, it's easy to see that a child selector
restricts its matches to elements that are directly connected in the tree. Figure 1-19
shows part of a document tree.
Figure 1-19. A document tree fragment
In this tree fragment, you can easily pick out parent-child relationships. For example,
the a element is parent to the strong , but it is child to the p element. You could match
Search WWH ::

Custom Search