Skip to main content

Combinator Selectors in CSS – What Is a CSS Combinator Selector?

A CSS combinator selector selects one or more HTML elements based on their relationship with some specified HTML nodes.

The three (3) types of CSS combinators are:

  • Descendant combinator selector
  • Child combinator selector
  • Sibling combinator selector

Let's discuss the three combinator selectors below.

What Is a CSS Descendant Selector?​

A CSS descendant combinator selector selects HTML elements descending from another node.

note

Descendant means children, grandchildren, great-grandchildren, and so on.

Syntax of a descendant combinator selector​

We define descendant combinators using one or more whitespace characters positioned between the first element's selector and the descending node's selector. Here is the syntax:

reference-element descending-element { style declarations }

Example 1: Apply red to the descendant-paragraphs of <div> elements​

The descendant combinator below selects all <p> elements nested inside the document's <div> elements.

div p {
color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied to the first, second, and third <p> elements.

<div>
<p>Paragraph 1 directly inside the div</p>
<p>Paragraph 2 directly inside the div</p>
<span>
<p>Paragraph 3 indirectly inside the div</p>
</span>
</div>
<p>Paragraph 4 outside the div</p>
<p>Paragraph 5 outside the div</p>

Try Editing It

Red will not get applied to the fourth and fifth <p> elements because they are not descendants of a <div> node. In other words, paragraphs 4 and 5 are not nested within a <div>.

Example 2: Apply purple to the descendant-paragraphs of <div> elements​

The descendant combinator below selects all <p> elements nested inside the document's <div> elements.

div p {
color: purple;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, purple will get applied to paragraphs one to five.

<div>
<article>
<p>Paragraph 1 is grandchild to the div</p>
<section>
<p>Paragraph 2 is great-grandchild to the div</p>
<p>Paragraph 3 is great-grandchild to the div</p>
</section>
</article>
<p>Paragraph 4 is child to the div</p>
<p>Paragraph 5 is child to the div</p>
</div>
<p>Paragraph 6 is outside the div</p>
<section>
<p>Paragraph 7 is outside the div</p>
<p>Paragraph 8 is outside the div</p>
</section>

Try Editing It

Purple will not get applied to paragraphs six to eight because they are not descendants of a <div> element. In other words, they are not nested within a <div>.

note

The use of the whitespace between the reference selector and the descendant selector for CSS comments is permitted.

Buy CSS Grid book

What Is a CSS Child Combinator Selector?​

A child combinator selector selects all HTML elements that are direct children of a specified parent element.

Syntax of a child combinator selector​

We define a CSS child combinator with a greater-than (>) symbol positioned between the parent element's selector and the children elements' selector. Here is the syntax:

parent-element > children-elements { style declarations }

Example 1: Apply red to the children-paragraphs of <div> elements​

The child combinator (>) below selects all <p> elements that are direct children (directly inside) of the document's <div> elements.

div > p {
color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the first and second <p> elements.

<div>
<p>Paragraph 1 directly inside the div</p>
<p>Paragraph 2 directly inside the div</p>
<span>
<p>Paragraph 3 indirectly inside the div</p>
</span>
</div>
<p>Paragraph 4 outside the div</p>
<p>Paragraph 5 outside the div</p>

Try Editing It

Red will not get applied to the third, fourth, and fifth <p> elements because they are not direct children of a <div> element.

Example 2: Apply purple to the grandchildren paragraphs of <main> elements​

In the CSS snippet below,

  • The first child combinator selects the <main> element's children <div>s.
  • The second child combinator selects the selected <div>s' children-paragraphs.
main > div > p {
color: purple;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, purple will get applied only to the first and third <p> elements.

<main>
<div>
<p>Paragraph 1 is child to 'div' and grandchild to 'main'</p>
<section>
<p>Paragraph 2 is grandchild to 'div' and great-grandchild to 'main'</p>
</section>
</div>
<div>
<p>Paragraph 3 is child to 'div' and grandchild to 'main'</p>
<section>
<p>Paragraph 4 is grandchild to 'div' and great-grandchild to 'main'</p>
</section>
</div>
<div>
<span>
<p>Paragraph 5 is grandchild to 'div' and great-grandchild to 'main'</p>
</span>
</div>
</main>
<article>
<div>
<p>Paragraph 6 is child to 'div' and grandchild to 'article'</p>
<section>
<p>
Paragraph 7 is grandchild to 'div' and great-grandchild to 'article'
</p>
</section>
</div>
<div>
<p>Paragraph 8 is child to 'div' and grandchild to 'article'</p>
<section>
<p>
Paragraph 9 is grandchild to 'div' and great-grandchild to 'article'
</p>
</section>
</div>
<div>
<span>
<p>
Paragraph 10 is grandchild to 'div' and great-grandchild to 'article'
</p>
</span>
</div>
</article>

Try Editing It

The system will apply purple to only the first and third <p> elements because they are direct children of a <main> element's <div> nodes.

What Is a CSS Sibling Selector?​

There are two (2) types of sibling selectors:

  • Adjacent sibling combinator selector
  • General sibling combinator selector

Let's discuss each of the sibling selectors.

What is a CSS adjacent sibling selector?​

A CSS adjacent sibling combinator selector selects an HTML element that immediately follows another specified nodeβ€”both of which must be of the same parent element.

note

Adjacent sibling is sometimes called "next-sibling combinator selector."

Syntax of an adjacent sibling combinator selector​

We define a CSS adjacent sibling combinator with a plus (+) symbol positioned between the first element's selector and the adjacent element's selector. Here is the syntax:

reference-element + adjacent-element { style declarations }

Example 1: Apply DeepPink to paragraphs adjacent to <h2> elements​

The adjacent sibling combinator (+) below selects <p> elements that immediately follows <h2> elements.

h2 + p {
color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the second <p> element.

<h1>Hello there! πŸ‘‹ I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>

Try Editing It

Browsers will apply DeepPink only to the second <p> element because it is the only paragraph adjacent to a <h2>.

Example 2: Apply red to paragraphs adjacent to <div> elements​

The adjacent sibling combinator (+) below selects <p> elements that immediately follows <div> elements.

div + p {
color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the third <p> element.

<div>
<p>Paragraph 1 directly inside the first div</p>
<p>Paragraph 2 directly inside the first div</p>
</div>
<p>Paragraph 3 immediately after the first div</p>
<p>Paragraph 4 not immediately after first div</p>
<div>
<p>Paragraph 5 directly inside the second div</p>
<p>Paragraph 6 directly inside the second div</p>
</div>
<h2>Heading immediately after the second div</h2>
<p>Paragraph 7 not immediately after the second div</p>

Try Editing It

The computer will apply red only to the third <p> element because it is the only paragraph adjacent to a <div>.

What is a CSS general sibling selector?​

A general sibling combinator selector selects HTML elements that follow (not necessarily immediately) another specified nodeβ€”all of which must be of the same parent element.

note

General sibling is sometimes called "subsequent-sibling combinator selector."

Syntax of a general sibling combinator selector​

We define a CSS general sibling combinator with a tilde (~) symbol positioned between the first element's selector and the target elements' selector. Here is the syntax:

reference-element ~ target-elements { style declarations }
Buy CSS Grid book

Example 1: Apply DeepPink to paragraphs placed after <h2> elements within the same parent element​

The general sibling combinator (~) below selects <p> elements that follows <h2> elements.

h2 ~ p {
color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied to the second, third, and fourth <p> elements.

<h1>Hello there! πŸ‘‹ I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>

Try Editing It

DeepPink will get applied to the last three <p> elements because they are siblings of the <h2>.

Example 2: Apply red to paragraphs following <div> elements within the same parent element​

The general sibling combinator (~) below selects <p> elements that follows <div> elements.

div ~ p {
color: red;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the third, fourth, and fifth <p> elements.

<section>
<div>Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p>Paragraph 2 directly inside section 2</p>
</section>
<section>
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>

Try Editing It

Red will get applied only to paragraphs 3, 4, and 5 because they are the only <p> elements following a <div> within the same parent element.

Overview​

This article discussed what a CSS combinator selector is. We also discussed the three types of combinator selectors.