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.

CodeSweetly ads

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 }

CodeSweetly ads

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.