CSS Combinators: Selectors, Descendant, Child & Sibling image

CSSHTML

Spurgeon Gnan Prakasham Tara

creator

Nov 25, 2024

Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

CSS For EveryOne

1.Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

2.Introducing CSS - What is CSS?

3.How to ADD (or) CONNECT our CSS with HTML

4.Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

5.Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

11.Learn CSS Fonts and visualize your website text like a PRO

12.Everything You need to know about Pseudo Classes in CSS

13.Learn CSS display property and Understand the document flow of elements in HTML

14.Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement

15.Mastering CSS Overflow: Understanding the Hidden, Scroll, and Auto Magic!

Hello everyone, welcome to WebDevPlusPlus!

In today's article, we’ll talk about CSS Combinators. By combining Selectors with Combinators, you can unlock the full potential of CSS to target and style specific HTML elements.

Let’s dive in and explore how they work!

How to get most out of this post?

Follow along with me as we go through the code. If something isn’t clear, don’t worry! Take your time and read the article a couple of times until you understand the main idea.

What are Combinators in CSS

Combinators in CSS are used to combine multiple selectors. As the name suggests, combinators help combine two or more selectors to target specific elements in an HTML page and apply styles to them.

For example, imagine you have an HTML element (a div) with a class name '.container', and you want to style all h1 tags inside it or select sibling tags like the one next to it. This is where combinators come in. It’s hard to achieve such targeting using selectors alone. If this sounds confusing right now, don’t worry—you’ll understand it clearly by the end of this article.

Before diving into how combinators work and how to use them, let’s first set up the starter code and file structure for this article.

Starter Code for this Article

On your computer, create a folder named combinators.
Inside the combinators folder:
- Create a folder named css, and inside it, create a blank CSS file called styles.css.
- Create an HTML file named index.html in the combinators folder, copy the code below into it, and save the file.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebDevParadise</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="main-heading">
      <h1 id="heading-one" class="title">
        Unleash the full power of CSS with SELECTORS + COMBINATORS
      </h1>
      <h1 id="heading-two" class="title">CSS Combinators</h1>
    </div>

    <section class="first-section">
      <p>Para 1</p>
      <div class="block">
        <p>Para 2</p>
        <p>Para 3</p>
        <div class="inner-block">
          <p>Para 4</p>
          <div>
            <p>Para 5</p>
          </div>
          <p>Para 6</p>
        </div>
      </div>
      <p>Para 7</p>
    </section>

    <ul class="nav-items-one">
      <li>List 1</li>
      <li data-status="reached" class="reached">List 2</li>
      <li>List 3</li>
      <li data-active="current">List 4</li>
      <li>List 5</li>
      <li>List 6</li>
    </ul>
  </body>
</html>
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43

As you can see, the CSS file is already linked to the HTML file. If you used a different file or folder structure, update the <link> tag inside the <head> section of the HTML file to correctly link to your CSS file.

Now, save the file and open it in your browser. You should see a layout similar to this:

html starter file

If you don’t understand any tags in the HTML above, take a moment to visit w3Schools or MDN Docs and learn more about HTML, as it is not covered in this series.

With the project set up, let’s start exploring CSS Combinators.

If you want to select an element using its class name or ID, you can write CSS like this (as covered in the previous lesson on CSS Selectors):

css
h1 {
  color: chocolate;
}
1 
2 
3

But we can also be more specific as below:

css
element.className {
  <!-- your styles here -->
}
element#idName {
  <!-- your styles here -->
}
1 
2 
3 
4 
5 
6

For Example: Lets select h1 tag with class name title as below. In your css file write the below styles:

css
h1.title {
  color: chocolate;
}
1 
2 
3

Now save the css file and reload the browser.

Selecting HTML elements more specifically

As you can see, the browser selected all the h1 tags with the class name title on this HTML page and applied the color Chocolate to them. This is an example of how we can be more specific when selecting HTML elements in CSS.

We can be even more precise when selecting HTML elements, and this is where CSS Combinators come into play.

Types of CSS Combinators

The most commonly used CSS combinators are:

Descendant Combinator
Child Combinator
General Sibling Combinator
Adjacent Sibling Combinator

Let’s go through each of these combinators one by one.

1. Descendant Combinator

As the name suggests, the Descendant Combinator is used to select the descendants (children or nested elements) of a tag.

For example, in our HTML file, we have an unordered list (ul) tag with several list items (li) as its descendants. We can use the descendant combinator to select all these li tags and apply styles to them.

The descendant combinator is represented by a space (" ") between selectors, as shown below:

css
parent child {
  <!-- your styles goes here -->
}
1 
2 
3

In your CSS file, let’s use the descendant combinator to select all the descendant tags of the ul tag and apply styles to them, as shown below.

css
h1.title {
  color: chocolate;
}

ul li {
  list-style: none;
  color: blue;
}
1 
2 
3 
4 
5 
6 
7 
8

The list-style: none; property removes the default list styles. Now save the CSS file and reload the browser. You’ll see that the default list styles are gone, and the color blue has been applied successfully!

Descendent Combinator Usage

Now let's use the descendant combinator again and chain multiple descendant combinators. Add the following styles to your CSS file:

css
body .first-section .block p {
  color: red;
}
1 
2 
3

Here’s how the above style works, broken down from right to left:
We selected all the p tags inside => .block, which is inside => .first-section, which is inside => the body tag, and applied styles to them.

Now, your CSS file will look like this:

css
h1.title {
  color: chocolate;
}

ul li {
  list-style: none;
  color: blue;
}

body .first-section .block p {
  color: red;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12

Now save the file and reload the browser.

Descendent Combinator Usage 2

As you can see, all the paragraphs from Para 2 to Para 6 were selected. Notice that the nested p tags (Para 4 and Para 5) were also selected. If you don’t want to select the nested children and only want to select the direct children, you can use the Child Combinator.

2. Child Combinator

A child combinator is used to select only the direct children of a tag, unlike the Descendent Combinator. You can create a child combinator using the greater than (>) symbol.

The syntax is:

css
parent > child {
  <!-- This will only selects direct Children not nested children -->
}
1 
2 
3

In your css file, Write the below code to select direct children(p tags) of a tag with class name .inner-block.

css
.inner-block > p {
  font-size: 20px;
}
1 
2 
3

Now our CSS file will look like this:

css
h1.title {
  color: chocolate;
}

ul li {
  list-style: none;
  color: blue;
}

body .first-section .block p {
  color: red;
}

.inner-block > p {
  font-size: 20px;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16

Now Save the file and reload the browser.

Child Combinator Usage

As you can see, the style was applied only to the direct children (Para 4 and Para 6), and not to the nested child (Para 5).

Now, let's move on to our next combinator, which is the Sibling Combinator.

3. General Sibling Combinator

The General Sibling Combinator allows us to select all siblings of a particular tag. You can create a general sibling combinator using the tilde (~) symbol.

Syntax:

css
tag1 ~ tag2 {
  <!-- Your CSS goes here -->
}
1 
2 
3

In your CSS file, lets add the below styles to select all the sibling "li tags" of a particular tag with class .reached

css
.reached ~ li {
  color: grey;
}
1 
2 
3

Now our CSS file will looks like this:

css
h1.title {
  color: chocolate;
}

ul li {
  list-style: none;
  color: blue;
}

body .first-section .block p {
  color: red;
}

.inner-block > p {
  font-size: 20px;
}

.reached ~ li {
  color: grey;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20

Now save the css file and reload the browser.

General Sibling Combinator Usage

As you can see, all the siblings of List 2 were selected except for List 1. This is because the General Sibling Combinator only selects the next upcoming sibling tags. That's why only the following lists (List 3 to List 6) were selected, and List 1 was not. Remember, the sibling combinator only selects the next siblings, not all of them.

We can also get creative with combinators. Let me show you one more example of the sibling combinator. You can combine different selectors to target specific elements using combinators.

Now, let's remove the previous style and add the following style to your CSS file instead:

css
[data-status="reached"] ~ li {
  color: grey;
}
1 
2 
3

Now our CSS file looks like this:

css
h1.title {
  color: chocolate;
}

ul li {
  list-style: none;
  color: blue;
}

body .first-section .block p {
  color: red;
}

.inner-block > p {
  font-size: 20px;
}

[data-status="reached"] ~ li {
  color: grey;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20

Now save the file and reload the browser.

General Sibling Combinator Usage

As you can see same style is applied here as well. here we used attribute selector to select a particular list of sibling tags.

Now lets move onto our final Combinator of this article i.e., Adjecant Sibling Combinator.

4. Adjecent Sibling Combinator

Using Adjecant Sibling Combinator, We can select the tag right next to it. i,e., not all the next upcoming sibling tags like genaral sibling but the tag right next to it. If you see the example you will understand it better. We can create adjecant sibling combinator with the help of plus(+) symbol.

Syntax:

css
tag1 + tag2 {
  <!-- Your styles go here -->
}
1 
2 
3

For Example, Lets add the below styles to select adjecent sibling(li) tag of an attribute-selector "[data-active="current"]".

css
[data-active="current"] + li {
  color: orange;
  font-weight: bold;
  font-family: cursive;
}
1 
2 
3 
4 
5

Now your CSS file will looks like this:

css
h1.title {
  color: chocolate;
}

ul li {
  list-style: none;
  color: blue;
}

body .first-section .block p {
  color: red;
}

.inner-block > p {
  font-size: 20px;
}

[data-status="reached"] ~ li {
  color: grey;
}

[data-active="current"] + li {
  color: orange;
  font-weight: bold;
  font-family: cursive;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26

Now, save the file and reload the browser.

Adjecent Sibling Combinator Usage

As you can see, List 5, which is right next to the tag with the attribute data-active="current", has been selected and styled. The key difference between the General Sibling Combinator and the Adjacent Sibling Combinator is that the General Sibling selects all the upcoming sibling tags, while the Adjacent Sibling only selects the immediate next tag.

Conclusion

In this article, we've covered various CSS combinators and their uses. By using these combinators, you can have more control and flexibility in selecting specific elements in HTML. The key takeaway is to practice these techniques to master CSS. That's all for now! See you in the next post. Stay tuned to WebDevParadise. Goodbye! :)

Please signin to view resources

Comments

No Comments Found

Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome, Learn essential CSS concepts and stay up-to-date with the latest trends and techniques in web design. Join us to enhance your CSS skills today.

Introducing CSS - What is CSS?

Introduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.

How to ADD (or) CONNECT our CSS with HTML

Discover how to connect CSS with HTML using inline, internal, and external stylesheets. This beginner-friendly guide covers methods and examples to style in css

Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector

Learn Everything you need to know about CSS Inheritance, A Step by Step Approach

Learn CSS inherit and initial values by learning how inheritance in CSS works and how few properties in CSS were automatically carried down to the children.