Hey there 👋
In this article, we will discuss CSS combinators. Which are a type of CSS selectors.
My Previous Articles 🚀
This is the third part of my CSS selectors series if you do not already know the basics of CSS selectors. Be sure to check them out before reading this article.
What are combinators
Combinators are CSS selectors that select elements based on the relationship between the selectors of two elements.
Combinators are applied within two selectors, and if the relationship between the first and second element is as defined by the combinator, then the second element is styled.
Types of combinators
There are four types of CSS selectors
-
Descendant Selector (" ")
Syntax:
Element Descendant
Descendant selectors select elements that are children, grandchildren, great-grandchildren, and so on, of the selected elements.
An element is selected if it can be found anywhere within the parent element. Even if it is nested in a different element.
It is represented by a single space (" ") between the 2 selectors.
Example:
div p{ color: blue; }
This example changes the text color of
p
elements that can be found inside adiv
element.
<h1>This is a header</h1> <p>This is outside a div element</p> <div> <h2>This is a header</h2> <p>This is inside a div element</p> <ul> <li>This is a list item</li> <p>This is a p tag inside an element that is inside a div element</p> <li>This is a list item</li> <p>This is a p tag inside an element that is inside a div element</p> </ul> </div> <p>This is outside a div element</p>
Result: The results will be displayed in a codepen towards the end of the article.
Even
p
elements that are inside theul
element are also selected. This is because theul
element is a child of thediv
element and that makes thep
elements within thediv
elements grandchildren of thediv
element, hence they are also selected. -
Child Selector (">")
Syntax:
Element > Child
Child selectors or direct descendants select only the direct children of an element.
If the element is nested within another element, it is not selected.
It is represented with a right-angle bracket
>
between the two elements.Example:
div > p{ color: red; }
This example changes the text color of only the
p
elements that are children ofdiv
elements.
<h1>This is a header</h1> <p>This is outside a div element</p> <div> <h2>This is a header</h2> <p>This is inside a div element</p> <ul> <li>This is a list item</li> <p>This is a p tag inside an element that is inside a div element</p> <li>This is a list item</li> <p>This is a p tag inside an element that is inside a div element</p> </ul> </div> <p>This is outside a div element</p>
Result: The results will be displayed in a codepen towards the end of the article
Onlyp
elements that are children ofdiv
elements are selected, and thep
elements that are inside theul
are not affected. -
Adjacent Sibling Selector ("+")
Syntax:
Element + sibling
Adjacent sibling selectors select adjacent siblings, that is elements that share the same parent and come immediately after the element.
If there is an element of a different type between the element and the sibling, then the sibling is not selected.
It is represented with a plus sign
+
between the two elements.
Example:
h1 + p{ border: 2px solid black }
This example adds a border around all
p
elements that come immediately after anh1
element.
<h1>This is a header</h1> <p>This paragraph comes after a header</p> <p>This is a paragraph</p> <h1>This is a header</h1> <span>This is a span</span> <p>This is a paragraph</p> <div> <h1>This is a header</h1> <p>This paragraph comes before a header</p> <h2>This is a header</h2> </div>
Result: The results will be displayed in a codepen towards the end of the article.
Only thep
elements that come after anh1
element are styled, and all otherp
elements are omitted from the styling. -
General sibling selector ("~")
Syntax:
Element ~ sibling
General sibling selectors select all elements that come after a particular element.
If there is an element of a different tag, between the 2 elements, it still selects them.
It is represented by the tilde sign
~
,(the button right under theEsc
key on your keyboard, pressing shift + the key will give you the tilde sign).Example:
.limit ~ li{
text-decoration: line-through;
}This example adds a line through all
li
elements that come after the element with the class of "limit".
<ul> <li>List item 1</li> <li>List item 2</li> <li class="limit">List item 3</li> <li>List item 4</li> <li>List item 5</li> <ul> <li>Nested item 1</li> <li>Nested item 2</li> </ul> <li>List item 6</li> <li>List item 7</li> </ul>
Result: The results will be displayed in a codepen towards the end of the article.
All elements after the element with a class of "limit" receive the styling, even those that are separated by a nested list.
Conclusion 😁
CSS combinators select elements indirectly, so you should be careful when using them.
They can also be used with any type of selector(simple or attribute)
Note that the comma ,
is not a combinator
The comma is used to separate selectors in a selectors list
Here is a codepen where the effects of the different combinators are shown.
This is the pen containing all the results of the above code examples Results by Joseph Taiwo (@teejay128) on CodePen.
Also check out MDN web docs and w3schools for further knowledge on CSS combinators
Although I did my research, I may still be missing out on some things since I decided to make this article a short one, feel free to drop a comment on anything, be it a correction or something I missed out.
Top comments (0)