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.