CSS Combinator Selectors

Introduction

This article will tackle the CSS combinator selectors (an advanced concept of CSS selectors). Usually, these advanced concepts are discussed in the last part of most books or video tutorials, such as child, adjacent sibling, and general sibling combinator, which is quite reasonable because you need to grasp many concepts. That's why the main objective of this post is to get you started with the advanced concepts.

However, if you're somewhere between a CSS newbie and intermediate and want to know the concepts of CSS combinator selectors quickly, you came to the right place. We'll try to explain everything simple as possible.

Lastly, knowing the basic selectors would help you before learning these concepts.

OK, let's get started.

CSS Combinator Selectors
 

Descendant Combinator

Before we start, let's try to review first the descendant selector.

When I started CSS back then, I was really confused with the term descendant, and if you are like me, no worries, we'll explain that here. OK, here it goes.

Descendant means another HTML element: a child, grandchild, great-grandchild, and so on. Take, for example, the following code below.

<div class="employees">
  <h3>List Of Employees</h3> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec fringilla magna.</p>
  <table>
    <thead>
      <tr>
        <th>Employee Id</th>
        <th>Fullname</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>EMP101</td>
          <td>Necesario, Jin Vincent</td>
          <td>IT Department</td>
        </tr>
        <tr>
          <td>EMP102</td>
          <td>Barkley, Kevin</td>
          <td>Finance Department</td>
        </tr>
        <tr>
          <td>EMP103</td>
          <td>Man, Joana</td>
          <td>Sales and Marketing Department<td>
        </tr>
    </tbody>
  </table>
  <p>Do you want to add a new employee? <button>Click Here</button></p>
</div>

Now, in our current example the <h3>,<p> (the first and the last one),<table> are child elements of <div>. While <thead>, <tbody> are child elements of <table> but also descendants of <div> (which in our case, grandchildren). Same goes with the <tr> (great-grand children) and <th> or <td> (great-great grand children).

Another thing is which is also true, <h3>,<p> (the first and the last one), table and all elements within the <table> have <div> as their common ancestor.

Let's try to show an example using the descendant selector.  

div.employees h3 {
  font-family: courier;
}

div.employees p{
  color: rgb(128,0,0);
}

div.employees th,td {
  padding: 10px;
  text-align:left;
}

In our example, the first one, the <div> class of employees, sets the <h3> font family into a courier.

While the second one set the <p> to have a color of maroon.

Then the third one sets the <th> and <td> padding to 10 pixels and sets the text alignment to the left. 

Output

Direct Child Combinator

In this section, we'll discuss the direct child combinator. One thing to remember when you see a greater than symbol (>) inside a CSS stylesheet this means it is using a direct child combinator selector.

Moreover, this operates much like descendant selectors, but it applies only to its immediate children of the element. Not unlike the descendant selector are more ambiguous because they apply to any descendant of an element; the descendant can be a grandchild or a great-grandchild or a great-great-grandchild, and so on.

Let's try to show an example using a direct child combinator selector.

<div class="content">
  <h2>Submit <strong>Realiable</strong> Feedback</h2>
  <p>Please be at least honest to your feedback.</p>
  <form>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"/>
    </div>
    <div>
      <label for="email">Email:</label>
      <input  type="email" id="email" name="email"/>
    </div>
    <div>
      <label for="feedback">Feedback:</label>
      <textarea id="feedback" name="feedback"></textarea>
    </div>
    <div id="button">
      <button>Submit</button>
    </div>
  </form>
</div>

In the HTML above, there are a lot of immediate children of a certain element.

Like for example, the <h2> its direct child element is <strong> which you’ll see on the CSS code below later.

Another one, most of the <div> inside the <form> has a direct child element of <label>,<input> or <textarea> and the last <div> has a direct child of <button>.

Let’s see them in a CSS style code sample below.

.content {
  width: 500px;
}

h2 > strong {
  color: #e25822;
}

div > label {
  display: inline-block;
  width: 100px;
  padding-right: 10px;
}

div > input {
  margin-top:5px;
  width: 200px;
}

div > textarea {
  width: 205px;
  margin-top: 5px;
}

div#button{
  width: 65%;  
} 

div#button > button{
  margin-top: 5px;
  float:right;
  background-color: rgb(128,0,0);
  color: yellow;
  font-weight:bold;
  font-size: 20px;
}

Output

Adjacent Sibling Combinator

Another term is the next sibling selector, but it is officially known as the adjacent sibling combinator. This selector selects the element's next sibling, the element following another element if it matches the second part of the selector. But don't forget that the symbol used for the next sibling selector is a plus sign (+).

Looks easy to understand, right? Don’t get confused it is easy. We can use the first HTML code used in the descendant selector section and make a small adjustment. Then show at least two next sibling selector. Let’s take a look of the code sample.

<div class="employees">
  <h3>List Of Employees</h3> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec fringilla magna.</p>
  <table>
    <thead>
      <tr>
        <th>Employee Id</th>
        <th>Fullname</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>EMP101</td>
          <td>Necesario, Jin Vincent</td>
          <td>IT Department</td>
        </tr>
        <tr>
          <td>EMP102</td>
          <td>Barkley, Kevin</td>
          <td>Finance Department</td>
        </tr>
        <tr>
          <td>EMP103</td>
          <td>Man, Joana</td>
          <td>Sales and Marketing Department<td>
        </tr>
    </tbody>
  </table>
  <p>Do you want to add a new employee? </p>
  <button>Click Here</button>
</div>

The difference here from the previous is we have remove the <button> inside the last <p>. Easy, right?

Now, for the CSS see the code sample below.

h3 + p{
  border: 1px solid green;
  border-radius: 5px;
  width: 600px;
  padding: 10px;
  text-align:center;
}

p + button{
  background-color: red;
  border-radius: 50px;
  color: yellow;
  font-weight:bold;
}

Obviously, the code shows that the <h3> its next sibling <p> should have modified the following properties: border, border-radius, width, padding, and text alignment.  Then the last example, the second <p> element inside the <div class=’employees'> will change its next sibling <button> element based on the properties that were set inside the code block.

Output

General Sibling Combinator

The general sibling combinators our last topic. It works almost like the adjacent sibling selector. But, this general sibling combinator selects all specified elements ( the first and its children) that come after the parent element. Again, don't forget that the symbol used for this selector is a tilde sign(~).

Let’s take a look for another code example using the general sibling combinator.

<div class="content">
  <h3>Hello CSS</h3>
  <!-- this one is affected -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <!-- this one is affected -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <blockquote>“Get busy living or get busy dying.” — Stephen King</blockquote>
  <!-- this one is affected -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

As you can see with the HTML sample code we have <h3> as our first element within the <div>. To show the usage of general sibling combinator in this given HTML code. We want to get all the <p> right after the parent <h3> element.

See the code sample below to see how we can do that with CSS.

h3 ~p {
  color: rgb(128,0,0);
  font-weight: bold;
}

Output

Summary

I hope you have enjoyed this article that discusses the different types of CSS Combinators.

We have shown the 4 types: the descendant combinator, direct child combinator, adjacent sibling combinator, and general sibling combinator.

Once again, I hope you have enjoyed this article/tutorial as I have enjoyed writing it.

Stay tuned for more. Until next time, happy programming!

Please don't forget to bookmark, like, and comment. Cheers! And Thank you!