CSS Combinators

CSS Combinators: CSS Combinators explains the relationship between two selectors, while the selectors in CSS are used to select the content for styling.

In this tutorial, you will learn-

In this article, you will learn-

1 CSS Combinators
2 Descendant Selector
3 Child Selector (>)
4 Adjacent Sibling Selector (+)
5 General Sibling Selector (~)
6 All CSS Combinator Selectors

A combinator is something that clarifies the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can incorporate a combinator.

There are four different combinators in CSS:

• descendant selector (space)

• child selector (>)

• adjacent sibling selector (+)

• general sibling selector (~)

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The accompanying example chooses all <p> elements inside <div> elements:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Child Selector (>)

The child selector chooses all elements that are the children of a specified element.

The accompanying example chooses all <p> elements that are children of a <div> element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to choose an element that is straightforwardly after another specific element.

Sibling elements should have a similar parent element, and “adjacent” means “promptly following”.

The accompanying example chooses the first <p> element that are placed immediately after <div> elements:

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>

General Sibling Selector (~)

The general sibling selector chooses all elements that are next siblings of a specified element.

The accompanying example chooses all <p> elements that are next sibling of <div> elements:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>

All CSS Combinator Selectors

Selector	Example	Example description
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.