Understanding Specificity

Descendant selectors

Descendant selectors are the ideal way to create selectors that are specific. I'm sure you have picked up on that point while working through the four rules I discussed previously.

A type selector for p might look like this:

p {color: black;}

This rule would make all p elements in your XHTML document black. If you required that the p element in your sidebar needed to be red and the sidebar was constructed with an ID selector named #sidebar, then you could specifically target those p elements with a descendant selector:

#sidebar p {color: red;}

The space between the #sidebar selector and the p element is known as a descendant combinator. The combinator instructs, "Look for an element with an id of sidebar and turn any p elements red." Descendant selectors can, (and often do) contain more than two reference points. If your p element contained a span and you wanted to make the span text green, then you would simply build on the previous selector:

#sidebar p span {color: green;}

For more information about descendant selectors , go to the Descendant Selector section on the W3C site.

Page 4 of 6

Previous Page

Next Page