CSS: Use Descendant Selectors - contextual 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.

CSS: Use Descendant Selectors – contextual selectors

Grandchildren Selectors

Combine Descendant Selectors with Grouping

Further Reading

Leave a Comment Cancel reply