Compound selectors and combinators

Compound selectors

In the previous lesson, we covered universal, type, class, and ID selectors and introduced specificity. A compound selector combines conditions that must match the same element.

This rule selects a p element that also has the class ong:

p.ong {
	color: blue;
}

Keep the selector parts together: p.ong is not the same as p .ong. The latter uses a space to describe a descendant relationship.

Translation note: the original spacing examples were inconsistent. p .ong is a descendant selector; p. ong is not the correct syntax for either intended example.

Child combinator

Use > to select a direct child. The first example targets elements with class ong directly inside a p. Repeating the combinator can describe a longer, explicit chain of descendants:

/* Example 1 */
p > .ong {
  color: blue;
}

/* Example 2 */
p > .ong > ol > li {
  color: blue;
}

Long chains can be unnecessarily verbose when you only care about an ancestor and a descendant, rather than every intermediate relationship.

Descendant combinator

A space selects descendants at any depth. Unlike >, it is not limited to immediate children. The source contrasts the long chain above with this shorter relationship:

p li {
	color: blue;
}

Editorial note: these are selector-syntax illustrations. An ol cannot validly be nested inside a p in ordinary HTML; the browser may close the paragraph automatically. Use a suitable container, such as div, when constructing a real nested-list example. The shorter selector also matches more possible descendants than the explicit chain.

Adjacent siblings

Elements that share a parent are siblings. The adjacent-sibling combinator, +, selects the second element only when it immediately follows the first:

selector1 + selector2 {
  /* property: value; */
}

The original example colors h2 red when it immediately follows h1. If a p element sits between them, the adjacent-sibling rule does not match that h2.

Open the original adjacent-sibling example on CodePen.

Subsequent siblings

The ~ combinator selects matching following siblings even if other elements appear between them:

selector1 ~ selector2 {
  /* property: value; */
}

In the last example, a p still appears between h1 and h2, but h2 receives the red color because adjacency is no longer required. The two elements still need to share a parent, and the match must follow the first element.

Open the original subsequent-sibling example on CodePen.

The generic selector placeholders and code comments in this lesson have been translated into English.