CSS Combinators : How to Use CSS Combinators to Select and Style Elements
A combinator is something that explains the relationship between CSS selectors. It allows you to target and style elements using their relationship with other elements and their location within the HTML document.
This article explains the different types of combinators and how they work. By the end of this article, you will understand the four types of combinators and how to use them.
But, before you proceed, I strongly recommend you read the previous article I wrote on CSS selectors. It explicitly explains the different types of selectors and how they work.
Done that?? 😉
Let's get started! 😎.
CSS Combinator : A Closer Look
When selecting an element requires you to use more than a simple selector, you must insert a combinator between the selectors for an accurate and efficient targeting. There are four different combinators in CSS ;
Descendant Selector ( empty space )
Child Selector (
>)General Sibling Selector (
~)Adjacent Sibling Selector (
+)
Descendant Selector
The descendant selector matches all elements that are the descendant of a particular element. Yeah!, Descendant is another English word for offspring.
In HTML, when elements are nested in another element, the element housing the other elements is referred to as the parent, while the elements being housed are called the descendants.
HTML
<p> Khalid bn Waleed, The all-time conqueror </p> <div class="container"> <p> The return of the King</p> <div> <p> The magnificent seven</p> </div> </div> <p> Autobiography of Malcom X </p> <p> The lord of the rings </p>
How to Use the Descendant Selector
To style the descendant elements; write the name of the parent element, leave an empty space and then write the name of the descendant.
CSS
.container p { color : red; font-size: 25px; }
The result :
In the above result, you can see that only the second and the third p element get styled. This is because they are the only p's among the descendants of the element with the class name "container". The second p is a direct child while the third is a grand child and they are both descendant.
You can also use the descendant combinator with multiple selectors like this :
CSS
.container div p { color : red; font-size: 25px; }
The result :
From the result above, you can see that only the third p get styled. This is so because the code selects all p elements that are descendant of of the div element which is in turn a descendant of the container class element.
Child Selector
The child selector selects elements that are nested one-level deep inside a parent element i.e the direct children.
HTML
<p> Khalid bn Waleed, The all-time conqueror </p> <div class="container"> <p> The return of the King</p> <div> <p> The magnificent seven</p> </div> </div> <p> Autobiography of Malcom X </p> <p> The lord of the rings </p>
How to Use the Child Selector
To style a child element using the child selector, write the name of the parent element, followed by the greater than > symbol and then the child element name.
CSS
.container > p { color : red; font-size: 25px; }
Result :
In the above result, you can see that only the second p get styled. This is because, even though the second and third p are both descendants of the container class element, only the second p is a direct child.
You can also use the child combinator with multiple selectors like this :
CSS
.container > div > p { color : red; font-size: 25px; }
The result :
The code above selects the p element which is a direct child of the div element which in turn is the direct child of the container class element. Hence the reason why only the third p get styled.
General Sibling Selector
Just like siblings in a family setting, the sibling selector selects elements that are of the same level with another element in the HTML arrangement.
HTML
<p> Khalid bn Waleed, The all-time conqueror </p> <div class="container"> <p> The return of the King</p> <div> <p> The magnificent seven</p> </div> </div> <p> Autobiography of Malcom X </p> <p> The lord of the rings </p>
In the HTML code above, the first, fourth, and fifth p's fall on the same level with the container class div.
How to Use the Sibling Selector
To style elements using the sibling selector, you need to select a particular sibling as the reference sibling.
Siblings are elements that fall on the same level in the HTML arrangement i.e nesting and indentation. Reference sibling is the sibling from which you want your sibling selector to start the selection.
Then, write the name of the reference sibling, followed by the tilde ~ symbol and then the other sibling's name.
CSS
.container ~ p { color : red; font-size: 25px; }
The result :
From the above result, you can see that only the fourth and the fifth p got styled. Why? 🤔 Isn't the first p a sibling??
The reason is that the sibling selector is only concerned with the siblings that come AFTER the reference sibling, any other sibling(s) won't be affected.
Adjacent Sibling Selector
The adjacent sibling selector selects only the immediate sibling to the reference sibling i.e the element that comes immediately after the reference sibling.
HTML
<p> Khalid bn Waleed, The all-time conqueror </p> <div class="container"> <p> The return of the King</p> <div> <p> The magnificent seven</p> </div> </div> <p> Autobiography of Malcom X </p> <p> The lord of the rings </p>
How to use the Adjacent Sibling Selector
To select an element using the adjacent sibling selector, write the name of the reference sibling, followed by the plus + symbol and then the other sibling's name.
CSS
.container + p { color : red; font-size: 25px; }
The result :
From the result above, you can see that only the fourth p got styled. This is because it is the immediate element after the container class element which is the reference element.
Bonus 😎
How to select multiple groups at once
How to use the Chain Selector
How to Select Multiple Group at once
You can select multiple groups at once by writing the name of all the groups, separating them with comma , and a space. For example :
HTML
<h1> Interesting books and movies </h1> <h2 id="book"> Autobiography of Malcom X </h2> <h3 id="movie"> The lord of the rings </h3> <p class="movie"> Legend of the seeker</p> <p class="movie"> The return of the King</p>CSS
h1, h2, .movie { color : blue; text-transform: uppercase; }
The result :
How to Use the Chain Selector
The chain selector selects elements using their attributes.
HTML
<h1> Interesting books and movies </h1> <h2 id="book"> Autobiography of Malcom X </h2> <h3 id="movie"> The lord of the rings </h3> <p class="movie" id="action"> Legend of the seeker</p> <p class="movie"> The return of the King</p>
To select an element using the chain selector, write the name of the element together with all its attributes without any space. Like this :
CSS
p.movie#action { color : goldenrod; font-size: 25px; }
The result :
The CSS code above selects a p element with the class name movie and the id name action. Hence the reason why the first p element got the style.
NOTE : When using chain selector, always write the element's name first, not the attribute. Because, it is the element that owns the attributes, not the other way round.
Key Takeaways
As you've seen in this article, combinators allow you to target and style elements using more than one simple selector. This is done using the elements' relationship with one another and their location within the document object model (DOM).
We have basically four different combinators, they are;
Descendant Selector : selects elements nested in another element, not minding how deep or shallow the nesting is.
Child Selector : selects elements nested one level deep inside another element.
General Sibling Selector : make use of the reference sibling to select elements that fall on the same level in the document object model.
Adjacent Sibling Selector : Selects only the immediate sibling after the reference sibling.
As a bonus, the article also discussed Multigroup Selector and Chain Selector.
If you really enjoyed and learned from this article, please share it with others 💜.