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.
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>
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>
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>.
The use of the whitespace between the reference selector and the descendant selector for CSS comments is permitted.
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>
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>
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.
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>
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>
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.
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 }
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>
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>
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.