32 Chapter 4
The advantage of having more methods for traversing documents should
be clear: Fewer styling hooks are required. You are most likely familiar with
markup like this:<ul>
<li class="first odd"><span>L</span>orem ipsum</li>
<li>Lorem ipsum</li>
<li class="odd">Lorem ipsum</li>
<li class="xlast">Lorem ipsum</li>
</ul>The markup contains class names to describe each element’s position
in the document tree: first () and last (x) show that the li elements are
the first and last children of the ul element, and odd () is used for the odd-
numbered li elements. An extra span () is included around the first letter
of the initial li element.
You mark up code like this when you want to add styles to alternating
elements, set different values on the first and last elements, or add special
formatting to the first letter of a text node. This markup detracts from the
clarity and semantic meaning of your code, but in many cases you need it to
provide the hooks to hang your styles on.
CSS3’s new methods allow you to achieve the same visual results with-
out muddying the markup with unnecessary classes and nonsemantic ele-
ments, making for cleaner and more maintainable code:<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>The other major advantage of the new selectors is that if new ele-
ments are added to the markup, class names don’t have to be updated to
accommodate them while still keeping order. This change takes CSS a
big step closer to achieving its stated goal: the separation of content and
presentation.Structural Pseudo-classes
As I stated in the introduction to this chapter, a pseudo-class provides a way
to select an element based on information that is not specified in the docu-
ment tree. Various subtypes are available, the most common of which is the
structural pseudo-class. These subtypes are used to select elements that are
not accessible using simple selectors.