Introduction
In CSS, you have multiple options when it comes selecting HTML elements on a web page. These options are called selectors. Some selectors are quite popular and more used than others and the popular ones are what every developer learns when starting out with CSS. In this article you'll learn about one of the least popular selectors called CSS Combinators.
Table of contents
- What are combinators?
- Descendant combinator
- Child combinator
- Adjacent sibling combinator
- General sibling combinator
- A note on combinators
- Summary
- Conclusion
What are Combinators?
Combinators selectors combine selectors in the way that it is evident some relationship exists between the selectors.
The combinators are classified into four groups:
- Descendant combinator
- Child combinator
- Adjacent sibling combinator
- General sibling combinator
Descendant combinator
The word "descendant" should give you an idea that for the combinator to match any element, an ancestor element must exist. The least being a parent element.
main p {
font-size: 1.2em;
}
In the code snippet above, main
is the parent element and p
is a child element therefore, this selector will match all p
which are descendants of main
and nothing else.
Child combinator
The child combinator is represented by >
, and this symbol is placed between two selectors (or more). It will only match an element if the second selector is a direct child of the first selector.
main > p {
font-size: 1.2em;
}
The selector above will match paragraphs that are direct children of main
and nothing else. Therefore, if there is any containing element like a div
or and article
with a paragraph within it, this selector will not match them.
<main>
<p>
This paragraph is selected.
</p>
<article>
<p>
But not this paragraph.
</p>
</article>
<p>
Also, this is selected.
</p>
</main>
Adjacent sibling combinator
This combinator matches an element if it is next to an element in a document hierarchy. It is represented by the addition symbol in mathematics i.e. +
main + p {
font-size: 2em;
background-color: #000000;
color: #ffffff;
}
This will match paragraphs that is next to main
in the HTML markup and not paragraphs within main
.
<main>
<p>
This paragraph is not selected.
</p>
<p>
Also, this is not selected.
</p>
</main>
<p>
But this is selected.
</p>
<p>
This is also not selected.
</p>
General sibling combinator
This combinator is represented by the tilde sign ~
. When this combinator is used between two selectors, all occurrence of the second selector are matched even if they are not adjacent to the first selector.
main ~ p {
font-size: 2em;
background-color: #000000;
color: #ffffff;
}
Unlike the adjacent sibling selector that selects one sibling after the first selector, this combinator selects all occurrence of elements matched by the second selector which occurs after the first selector in the document hierarchy.
<main>
<p>
This paragraph is not selected.
</p>
<p>
Also, this is not selected.
</p>
</main>
<p>
But this is selected.
</p>
<p>
Also, this.
</p>
<p>
And this.
</p>
A note on combinators
Combinators are extremely useful when you intend to target specific parts of your document, but it's difficult to reuse the CSS code elsewhere because it's solely for that specific part in your HTML document. It is advisable to create classes with semantic names that are reusable.
Summary
Combinator | Sign | Example | Location of matched element | Number of matched element |
---|---|---|---|---|
Descendant combinator |
space
|
main p |
Within the first selector | All occurrence of the second selector within the first selector. |
Child combinator | > |
main > p |
Within the first selector | All occurrence of the second selector that is a child of the first selector only. |
Adjacent sibling combinator | + |
main + p |
Outside the first selector | The first occurrence of the second selector after the first selector in the document hierarchy. |
General sibling combinator | ~ |
main ~ p |
Outside the first selector | All occurrence of the second selector after the first selector in the document hierarchy. |
Conclusion
In this article we discussed combinator selectors which is a class of CSS selectors that are sparingly used compared to class selectors and ID selectors but sometimes come in handy when the markup is not large (and hopefully not) and you have no control over the HTML markup e.g. when it is generated by a Content Management System (CMS).