HTML and CSS Reference
In-Depth Information
Here's another example: let's say that you want gray to be the text color of any b (bold-
face) element that is part of a blockquote , and also for any bold text that is found in a
normal paragraph:
blockquote b, p b {color: gray;}
The result is that the text within b elements that are descended from paragraphs or
block quotes will be gray.
One overlooked aspect of descendant selectors is that the degree of separation between
two elements can be practically infinite. For example, if you write ul em , that syntax
will select any em element descended from a ul element, no matter how deeply nested
the em may be. Thus, ul em would select the em element in the following markup:
<li>List item 1
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
<li>List item 1-4</li>
Another, even subtler aspect of descendant selectors is that they have no notion of
element proximity. In other words, the closeness of two elements within the document
tree has no bearing on whether a rule applies or not. This has bearing when it comes
to specificity (which we'll cover later on) but also when considering rules that might
appear to cancel each other out.
For example, consider the following (which contains a selector type we'll discuss later
in this chapter):
div:not(.help) span {color: gray;} span {color: red;}
<div class="help">
<div class="aside">
This text contains <span>a span element</span> within.
What the CSS says, in effect, is “any span inside a div that doesn't have a class con-
taining the word help should be gray” in the first rule, and “any span inside a div whose
class contains the word help ” in the second rule. In the given markup fragment, both
rules apply to the span shown.
Search WWH ::

Custom Search