Skip to main content

Getting StartED with CSS

Combining Selectors for Greater Control

CSS lets you combine selectors in a variety of ways, giving you greater control over where styles should be applied. This page describes the following ways of combining selectors:

These selectors are supported by all browsers in widespread use, with the exception of Internet Explorer 6, which supports only descendant selectors.

Descendant selectors

A descendant selector matches any element that is a descendant of another. To create a descendant selector, separate the two selectors by a space, putting the ancestor first. For example, the following rule is applied to all paragraphs inside a <blockquote> element:

blockquote p { font-style: italic; }

The preceding example uses two type selectors, but you can create a descendant selector from any other types of selectors. For example, the following descendant selector targets unvisited links that are descendants of an element with the ID sidebar:

#sidebar a:link { color: #008080; }

The descendant can be at any level of the HTML hierarchy, as long as it is in the same branch of the family tree.

Child selectors

A child selector matches an element that is a child of another—in other words, it must be at the next level of the HTML hierarchy, and no deeper. Take the following example:

<blockquote> <p>To be, or <em>not</em> to be. . .</p> </blockquote>

In this example, the <em> tag is a child of <p>, but not of <blockquote>. The <em> tag is a descendant of the <blockquote> tag, but not one of its children.

To create a child selector, add a greater than sign (>) after the parent selector, and follow it with the selector for the child element. For example, the following child selector targets all paragraphs that are direct children of a <blockquote> element:

blockquote > p { font-style: italic; }

When elements are nested only one level deep, it is marginally more efficient to use a child selector, because the browser doesn’t need to check any further down the hierarchy. However, child selectors are not supported by IE6. So, until IE6 disappears from the scene, it is more practical to use descendant selectors.

The space on either side of the greater than sign is optional, but is normally included for readability. However, the following is equally valid:

blockquote>p { font-style: italic; }

To target the <em> tag in this example, you can chain child selectors like this:

blockquote > p > em { font-style: normal; }

Adjacent sibling selectors

An adjacent sibling selector matches an element immediately preceded by a sibling of the specified type. To create an adjacent sibling selector, add a plus sign (+) between the two selectors like this:

h1 + p { text-indent: 0; font-weight: bold; }

This targets a paragraph that immediately follows an <h1> heading. Both elements must have the same parent in the HTML hierarchy, and no other elements must come between them. Not supported by IE6.

The specification does not say the spaces surrounding the plus sign are optional, but all browsers that currently support the adjacent sibling selector support it with or without spaces.

In CSS3, this selector is called the adjacent sibling combinator. It works exactly the same way.

General sibling combinator

This selector is part of the proposed CSS3 specification, but is already supported by most browsers in widespread use, including Internet Explorer 7 (but not IE6).

The general sibling combinator matches elements that are preceded by another element at the same level of the HTML hierarchy. You create it by adding a tilde (~) between two selectors.

The following rule changes the color of the text in paragraphs that follow an <h1> heading:

h1 ~ p { color: red; }

However, this rule affects all paragraphs that are siblings of the <h1> heading. So, paragraphs after an <h2> heading will also be affected as long as there is an <h1> heading at the same level of the family tree. To style paragraphs differently after each type of heading, you need separate rules like this:

h1 ~ p { color: red; } h2 ~ p { color: blue; } h3 ~ p { color: green; }

So, although the general sibling combinator is relatively easy to use, you need to think carefully about where to use it. Otherwise, you could end up with unwanted consequences.