Understanding CSS Selectors: A Beginner's Guide (Part 2)

Table of Contents:

• Introduction

• > Child Combinator

• ~ Subsequent sibling combinator

• + Next Sibling Combinator

• Conclusion

1. Introduction:

   In part 2 of the series, we will take a break from learning other types of selectors and dive deep into how to combine and create selectors to target specific elements in the markup. That's why we are introducing combinators here.

2. > Child Combinator:

   This combinator is used to target the children of a specific element. To break it down, let's take an example:

    <div class='container'>
        <p>Soemthing</p>
        <div>
          <p>Something else</p>
          <div>
            <p>Another thing</p>
          </div>
        </div>
      </div>
   

   In this example if we want to target for instance the children of the div with class ‘container’ and give them a red border you might think of it this way :

    .container * {
     border:1px solid red;
    }
   

   From the previous part, we know that the universal selector is used to select all elements within a specific scope. Here, it selects all elements inside the div with the class container. However, this is not exactly what we need because this approach selects all descendants of the div, while we only want the direct children. This is where the combinator > is useful. By using this before the universal selector, you specify the level at which you want the universal selector to stop. Here is how you can do it:

    .container > * {
     border:1px solid red;
    }
   

3. ~ Subsequent sibling combinator:

   The subsequent-sibling combinator separates two selectors and matches all instances of the second selector that are siblings of the first and come after it. The first rule is that they must be siblings (children of the same node). The second rule is that only the occurrences of the second selector that follow the first are relevant in this case. Let’s illustrate it by doing a quick example:

    <div class='container'>
        <p>am a paragraph that does not get concerned by this selector </p>
        <h1>Am the trigger of the selector any p after
         me is going to be bold and red</h1>
        <p>Here am I bold and red </p>
        <span>am here to demonstrate even ps after me 
        are concerned since they are after the h1 </span>
        <p>Another element selected thanks to the subsequent 
        sibling combinator</p>
    </div>
   

    .container h1 ~ p {
     font-weight:bold;
     color:red;
    }
   

4. + Next Sibling Combinator:

   This one is pretty much like the ~ with one simple difference, it selects the sibling only if it occurs directly after the first. Meaning h1 + p selects all the p elements that are preceded directly by an h1. Here is the same example with this selector :

    <div class='container'>
        <p>am a paragraph that does not get concerned by this selector </p>
        <h1>Am the trigger of the selector only the  p after
         me is going to be bold and red</h1>
        <p>Here am I bold and red </p>
        <p>Am not going to get selectoed because am not preceded diretly 
        by an h1 </p>
    </div>
   

    .container h1 + p {
     font-weight:bold;
     color:red;
    }
   

5. Conclusion:

   Understanding CSS combinators is essential for efficiently targeting specific elements within your HTML structure. The child combinator (>), subsequent sibling combinator (~), and the next sibling combinator (+) Each serves unique purposes in refining your CSS selectors. By mastering these combinators, you can create more precise and maintainable stylesheets, ensuring that your web pages are both visually appealing and well-structured. As you continue to explore CSS, these tools will become invaluable in your web development toolkit. Follow our newsletter to get notified when part 3 is published.