The two or more statements used in this selector can be any valid selector statement. For example, the first could be a class selector followed by a type selector. The distance between the selectors does not matter. Each intermediate element will not have to be listed for the selector to work.

The combinator can be stacked. Each statement will have a whitespace character around it. This list of selectors does not need to be all inclusive, but for the selector to match the hierarchy, it does need to exist.

This selector is best used when you only want to style elements in certain situations. The following example highlights this.

In this first example, we will target images that are in an ordered list with the ID of presidents and give them a red border. Here is its HTML code:

<ol id="presidents">
  <li><img src="pres01.png" alt="PortraitProtrait of George Washington" />George Washington</li>
  <li><img src="pres02.png" alt="PortraitProtrait of John Adams" />John Adams</li>
</ol>
<img src="not_pres.png" alt="not a President - no border" />

Here is the CSS rule:

ol#presidents img { border: 1px solid #ff0000; }

Here is an example that demonstrates that there can be many elements between selectors. Here is the very arbitrary HTML.

<div class="example">
  I am normal.
  <div>
    <div class="select-me">
      I am red.
      <span class="select-me">I am red as well.</span>
    </div>
  </div>
</div>

Here is the CSS rule:

.example .select-me { color: #ff0000; }

Finally, here is an example of a multiple selector hierarchy, which has the following HTML:

<div class="first">Not the target
  <div class="second">Not the target
    <div class="third">I am the target.</div>
  </div>
</div>

The CSS rule:

.first .second .third { color: #ff0000; }

This is very similar to the descendant combinatory except for the fact that this only targets a child relationship. The second selector must be a direct descendant of the parent directly contained by the first.

Here is an example that will only target the first span in this HTML:

<div>Here is an <span>arbitrary</span> <p><span>structure.</span></p></div>

Here is the CSS rule that only sets the first span's color to red:

div > span { color: #ff0000; }

The two elements must have the same parent, and the first element must be immediately followed by the second.

Here is an example that highlights how the selector works. Only the second span will have the rule applied. The final span's preceding sibling is not another span so it is not matched by the selector. Here is the HTML.

<p>Here are a few spans in a row: <span>1</span> <span>2</span> <em>3</em> <span>4</span></p>

CSS:

span + span { color: #ff0000; }

This is similar to the adjacent sibling combinatory; in that, both elements need the same parent. The difference is that the two elements can be separated by other elements.

Here is an example that shows that both the second and third spans will be targeted even though there is an em element between them. Here is the HTML:

<p>Here are a few spans in a row: <span>1</span> <span>2</span> <em>3</em> <span>4</span></p>

Here is the CSS rule:

span ~ span { color: #ff0000; }