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:
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four has a nested list
<li>Sub-item one</li>
<li>Sub-item two</li>
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:
Search WWH ::

Custom Search