Skip to main content

Combinators in CSS (Live Playground)

Combinators in CSS allow you to target and style HTML elements based on their relationships with other elements, such as descendants, siblings, or direct children. In this tutorial, you will learn how to use combinators effectively, along with sample code and simple explanations.

Descendant combinator​

The descendant combinator (a space) targets elements that are descendants of a specified element. The styles within the declaration block will be applied to all matching descendants.

Example:

CSS
/* Style all paragraph elements inside a div element */
div p {
  color: darkblue;
}
HTML
<div>
  <p>This paragraph will be dark blue.</p>
  <section>
    <p>This nested paragraph will also be dark blue.</p>
  </section>
</div>

In this example, the descendant combinator div p targets all paragraph elements that are descendants of a div element and applies the specified color style.

Live Playground, Try it Yourself

Child combinator​

The child combinator (>) targets elements that are direct children of a specified element. The styles within the declaration block will be applied to matching direct children only.

Example:

CSS
/* Style direct paragraph children of a div element */
div > p {
  font-weight: bold;
}
HTML
<div>
  <p>This paragraph will be bold.</p>
  <section>
    <p>This nested paragraph will not be bold.</p>
  </section>
</div>

In this example, the child combinator div > p targets direct paragraph children of a div element and applies the specified font-weight style.

Live Playground, Try it Yourself

Adjacent sibling combinator​

The adjacent sibling combinator (+) targets elements that are immediately preceded by a specified element. The styles within the declaration block will be applied to matching adjacent siblings.

Example:

CSS
/* Style paragraph elements immediately following an h1 element */
h1 + p {
  font-style: italic;
}
HTML
<h1>Heading</h1>
<p>This paragraph will be italic.</p>
<p>This paragraph will not be italic.</p>

In this example, the adjacent sibling combinator h1 + p targets paragraph elements immediately following an h1 element and applies the specified font-style.

Live Playground, Try it Yourself

General sibling combinator​

The general sibling combinator (~) targets elements that are siblings of a specified element. The styles within the declaration block will be applied to matching sibling elements.

Example:

CSS
/* Style paragraph elements that are siblings of an h1 element */
h1 ~ p {
  text-decoration: underline;
}
HTML
<h1>Heading</h1>
<p>This paragraph will be underlined.</p>
<p>This paragraph will also be underlined.</p>

In this example, the general sibling combinator h1 ~ p targets paragraph elements that are siblings of an h1 element and applies the specified text-decoration style.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, you learned how to use combinators in CSS to target and style HTML elements based on their relationships with other elements. With this knowledge, you can create more precise and context-specific styles for your web page, allowing for greater control and flexibility in your designs. By combining various combinators with other selectors, you can achieve a higher level of specificity and target elements in complex HTML structures effectively. This will enhance the overall design and user experience of your web page.