CSS: Use Descendant Selectors

Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. First introduced in CSS1 in 1996, descendant selectors (then called contextual selectors) match elements that are descendants of other elements in the document tree. Composed of two or more selectors separated by whitespace, descendant selectors apply styles to elements that are contained within other elements.

For example:

div.nav ul {font-size:1.1em;}

The above selector is a pattern that matches all ul elements contained within divs with a class of .nav. So this:

.nav {font-size:1.1em;}
...
<div>
<ul>
<li class="nav">One</li>
<li class="nav">Two</li>
...
</ul>
</div>

Becomes this:

div.nav ul {font-size:1.1em;}
...
<div class="nav">
<ul>
<li>One</li>
<li>Two</li>
...
</ul>
</div>

Even better, adopt a uniform look for all unordered lists within divs and eliminate the class, like this:

div ul {font-size:1.1em;}
...
<div>
<ul>
<li>One</li>
<li>Two</li>
...
</ul>
</div>

Essentially, descendant selectors utilize the existing structure of your XHTML document to selectively apply styles. Rather than hard coding classes within specific elements you use the relationships among elements to apply styles. Your code becomes more modular, using containers that style their contents selectively. This separation of presentation from structure keeps your code clean and your style sheets lean.

Grandchildren Selectors

You don't have to stop at one generation for descendant selectors. You can add more selectors to get more specific. For example:

div * p

This selector uses the universal selector (*) to match all paragraphs that are grandchildren or greater of div elements. Another example:

ul ul li

This selector targets list elements within an unordered list, within an unordered list. You can also target specific elements with child selectors (>), adjacent sibling selectors (+), and attribute selectors ([...]). We'll talk about these and other selectors in future tweaks.

Combine Descendant Selectors with Grouping

Descendant selectors can be combined with grouping and shorthand properties to create small yet powerful patterns. So pay attention to your ancestors, their wisdom can carry you a long way.

Further Reading

Cascading Style Sheets, level 1 CSS Specification

The CSS1 specification, from the W3C. Introduced the notion of contextual selectors. By Hakon Wium Lee and Bert Bos.

Cascading Style Sheets, level 2 CSS2 Specification

The CSS specification, from the W3C. Renamed contextual selectors to descendant selectors to make way for other types of selectors. By Bert Bos et al.

Cascading Style Sheets, level 2, revision 1 CSS2.1 Specification

CSS 2.1 corrects some errors in version 2.0, and adds some features in frequent use. Is a "snapshot" of current CSS usage, similar to HTML 3.2.

Complete CSS Guide: Descendant Selectors

Western Civilization's House of Style weighs in on this powerful way to selectively apply styles to your HTML documents.

CSS Home Page

From the W3C

CSS Optimization

Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.

Selectutorial: Descendant Selectors

Clean tutorial on the use of descendant selectors.

By website optimization on 6 Feb 2004 PM