In our last post, we went over simple selectors which includes selecting your CSS style by type, id, class, universal and grouping selectors. In this post we are going to discuss CSS combinators.
But the obvious question – What is CSS combinators and why do we need them?
This is the second part of a five-parts article. You can find the first one here: CSS Selectors – The ultimate guide on simple selectors
Others are:
➥ CSS Attribute Selectors – A Quick Intro
➥ CSS Pseudo class Selectors – A Quick Intro
➥ CSS Pseudo element Selectors – A Quick Intro
In short:-
Overuse of classes and IDs can also create more presentational markup in your HTML, creating more work for you and anyone else working with the code.
But CSS combinators reduce the strain of overly specific selectors and heavier markup by efficiently associating elements on your page.
Let’s dive into the different kinds of combinators we can use.
What are Combinator in CSS?
A combinator is something that explains the relationship between the selectors in CSS. By combinators you can target children, grandchildren, great-grandchildren, or later of a given element in the document tree.
There are four different combinators in CSS and they are as follows:
- Descendant selector (space)
- Child selector (
>
) - Adjacent sibling selector (
+
) - General sibling selector (
~
)
CSS Descendant selector (space)
Descendant selector lets you mix simple selectors with a specified logic and is denoted with an empty space. The pattern of this combinator is simply two tags side by side with a space in between them. It selects elements that are descendants of the first element.
Descendant selector example
<body> <article> <h1>Header</h1> <p>Text inside article</p> <div> <p>Text inside div</p> </div> </article> <p>Text outside article</p> </body>
For example, if we want to select all of the p
elements, which are inside the article
tag. We first write the article
selector, putting a space and then define a tag next to it and finally we can apply rules.
article p { background-color: yellow; }
As you can see from the CSS, we gave a background color of yellow and the p
tags inside the article
tag will get a yellow background color. The other p
tags which are outside of it won’t be affected by this rule.
CSS Child selector (>)
The child selector uses the greater than (>
) symbol to denote and targets elements that are immediate children of the parent.
You can use this selector, for instance, to select the first level of list elements inside a nested list that has more than one level. Let’s check out an example to understand how it works:
Child selector example
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Services</a> <ol> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> </ol> </li> <li><a href="#">Contact</a></li> </ul> </body>
ul > li { list-style: square; } ul > li ol { list-style: none; }
The style rule inside the selector ul > li
applied to only those li
elements that are direct children of the ul
elements, and has no effect on other list elements.
🤔 Descendant selectors vs. Child selectors
The difference between Descendant and Child selectors is that the Child Combinator is more specific. It only select direct children elements of the first tag.
The Descendant Combinator however is more liberal. Not only it select children of the first tag, it will also select grand children, great grand children, and so on.
CSS Adjacent sibling selector (+)
Let’s move on with another combinator which is the adjacent sibling selector. Adjacent means “immediately following” and in CSS it is represented with the plus (+
) operator.
Adjacent sibling combinator targets elements that are next to each other in the document tree which have the same parent. In other words the second tag directly follows the first, and they share the same parent element.
This selector has the syntax like: E1 + E2
, where E2
is the target of the selector.
Adjacent sibling selector example
The selector h1 + p
in the following example will select the p
elements only if both the h1
and p
elements share the same parent in the document tree and h1
is immediately precedes the p
element.
That means only those paragraphs that come immediately after each h1
heading will have the associated style rules.
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ul class="task"> <li>Task 1</li> <li>Task 2</li> <li>Task 3</li> </ul> <p>This is one more paragraph.</p> <p>This is also a paragraph.</p> </body>
h1 + p { color: blue; font-size: 18px; } ul.task + p { color: #f0f; text-indent: 30px; }
CSS General sibling selector (~)
The fourth and last combinator is the general sibling selector. Sibling means elements on the same level, so none of them are their parent or children.
The general sibling selector is similar to the adjacent sibling selector, but it is less strict. A general sibling selector is made up of two simple selectors separated by the tilde (~
) character.
It can be written like: E1 ~ E2
, where E2
is the target of the selector.
General sibling selector example
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ul class="task"> <li>Task 1</li> <li>Task 2</li> <li>Task 3</li> </ul> <p>This is one more paragraph.</p> <p>This is also a paragraph.</p> </body>
The selector h1 ~ p
in the example below will select all the p
elements that preceded by the h1
element, where all the elements share the same parent in the document tree.
h1 ~ p { color: blue; font-size: 18px; } ul.task ~ p { color: #f0f; text-indent: 30px; }
So if you need to target elements on the same level of a specified element in a document tree then it is good to use the general sibling selector.
Conclusion
Sometimes people ask that we already have the class
and id
selector in CSS so do we have to use combinators?
Actually no, you don’t have to use combinators, you can surely apply classes as much as you need, but sometimes in some cases using classes is not that efficient and then using these combinators will help you to write less code and do more in CSS.
That’s why it’s good to know them.
Add comment