Combinators

Combinators are used to select more complex structures. They can help target specific elements or groups of elements that would be difficult to target otherwise.

Descendant combinator

This selector specifies that an element must be contained by another element.

The combinator is the whitespace character. We are explicitly defining it here so that it is clear:

selector-a selector-b

Description

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.

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

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:

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

The CSS rule:

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

The child combinator

This selector targets a specific child:

element-a > element-b

Description

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:

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

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

p > span { color: #ff0000; }

The adjacent sibling combinator

This selector targets elements that are next to each other in the hierarchy:

element-a + element-b

Description

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; }

The general sibling combinator

This selector targets any element that has the same parent and follows the first:

element-a ~ element-b

Description

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; }

The selector specificity

This is not a selector rule like the others in this section. An element can be targeted by multiple rules, so how do you know which rule takes precedence? This is where specificity comes in. You can calculate which rule will be applied. Here is how it is calculated. Keep in mind that an inline style will trump any selector specificity:

• The number of ID selectors in the selector is denoted by a
• The number of class selectors, attribute selectors, and pseudo-classes in the selector is denoted by b
• The number of type selectors and pseudo-elements in the selector is denoted by c
• Any universal selectors are ignored

The numbers are then concatenated together. The larger the value, the more precedence the rule has. Let's look at some selector examples. The examples will be composed of the selector and then the calculated value:

• h1: a=0 b=0 c=1, 001 or 1
• h1 span: a=0 b=0 c=2, 002 or 2
• h1 p > span: a=0 b=0 c=3, 003 or 3
• h1 *[lang="en"]: a=0 b=1 c=1, 011 or 11
• h1 p span.green: a=0 b=1 c=3, 013 or 13
• h1 p.example span.green: a=0 b=2 c=3, 023 or 23
• #title: a=1 b=0 c=0, 100
• h1#title: a=1 b=0 c=1, 101

The easiest way to think about this is that each grouping (a, b, or c) should be a smaller group of elements to choose from. This means that each step has more weight. For example, there can be many instances of h1 on a page. So, just selecting h1 is a little ambiguous. Next, we can add a class, attribute, or pseudo-class selector. This should be a subset of the instances of h1. Next, we can search by ID. This carries the most weight because there should only be one in the entire document.

Here is an example HTML that has three headings:

<h1>First Heading</h1>
<h1 class="headings"><span>Second Heading</span></h1>
<h1 class="headings" id="third">Third Heading</h1>

Here is the CSS rule that will target each heading differently. The first rule targets all the elements, but it has the lowest specificity, the next rule is in the middle, and the last rule only targets one element. In the following example, /* */ denotes text that is a comment:

h1 { color: #ff0000; } /* 001 */
h1.headings span { color: #00ff00; } /* 012 */
h1#third { color: #0000ff; } /* 101 */