1. Home
  2. Computing & Technology
  3. Web Design / HTML

Cascading Style Sheets Descendant Selectors
Define Styles on Specific Elements

By , About.com Guide

Descendant selectors in CSS allow you to define styles on elements that are located in specific locations in the XHTML document tree. These selectors are defined as patterns, so that you can define child elements, grandchild, and so on.

Define a descendant selector by separating the relevant elements with a space:
  div p { background-color : #ccc; }

This will impact all p elements that are within a div element. But p elements that are within the body of the document would not be affected.

You can also use patterns to define your selectors:
  div * em { background-color : #ccf; }

This will affect all em elements that are grandchildren of a div element. In other words, any em that is two elements below the div. For example:
<div><p><em>This one is</em></p> <em>This one isn't</em></div>

Browser Support

The descendant selector with patterns does not work in Netscape 4 or IE 4 Windows and IE 5 (Macintosh).

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. CSS
  5. Advanced CSS
  6. Cascading Style Sheets (CSS) Descendant Selectors>

©2009 About.com, a part of The New York Times Company.

All rights reserved.