Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 22, 2022 02:53 pm GMT

Sibling combinator in CSS

There may be some confusion as what we are calling sibling. So, let's first get that out of the way. See the below code:

<!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>sibling combinator</title></head><body>    <div class="div1">        <h2>1st Heading</h2>    </div>    <div class="div2">        <p>Lorem ipsum text</p>        <h2>2nd Heading</h2>        <p>Lorem ipsum  text</p>        <p>Lorem ipsum text</p>    </div></body></html>

In the above code:

h2(1st heading) has no sibling (parent: .div1)

p, h2(2nd heading), p and p are siblings (parent: .div2)

classes div1 and div2 are siblings (parent: body)

There are 2 types of sibling combinators:

  1. Adjacent sibling combinator
  2. General sibling combinator

Let's first understand the Adjacent sibling combinator.

Here's what MDN has to say: The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Let's code it out to understand better.

Example 1:

<!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>sibling combinator</title>    <style>        h2 + p{            background-color: pink;        }    </style></head><body>    <div class="div1">        <h2>1st Heading</h2>    </div>    <div class="div2">        <p>1st para</p>        <h2>2nd Heading</h2>        <p>2nd para/p>        <p>3rd para</p>    </div></body></html>

1.PNG
As you can see above, the 2nd para in div2 turned pink as it was immediately following the 2nd heading and both are siblings.

Example 2:

<!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>sibling combinator</title>    <style>        p + p{            background-color: pink;        }    </style></head><body>    <div class="div1">        <h2>1st Heading</h2>    </div>    <div class="div2">        <p>Lorem ipsum text</p>        <p>Lorem ipsum text</p>        <h2>2nd Heading</h2>    </div>

2.PNG

As you can see above, the 2nd para in div2 turned pink as it was immediately following the 1st para and both are siblings.

Example 3:

<!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>sibling combinator</title>    <style>        p + p{            background-color: pink;        }    </style></head><body>    <div class="div1">        <h2>1st Heading</h2>    </div>    <div class="div2">        <p>1st para</p>        <h2>2nd Heading</h2>        <p>2nd para</p>    <div>

3.PNG

Can You guess why the 2nd paragraph does not turn pink?

Because in div2, the 2nd para is not immediately following the 1st para. There is an "h2" in between.

Now, let's move on to the general combinator.

Here's what MDN has to say: The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

Let's get to the best practice of understanding with an example.

Example 4:

<!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>sibling combinator</title>    <style>        p + p{            background-color: pink;        }    </style></head><body>    <div class="div1">        <h2>1st Heading</h2>    </div>    <div class="div2">        <p>1st para</p>        <h2>Heading</h2>        <p>2nd para</p>        <h2>Heading</h2>        <p>3rd para</p>        <h2>Heading</h2>        <p>4th para</p>

4.PNG

In the above code, it does not matter if there is "h2" in between. All the para's following the 1st para turned pink.

Although it might be obvious, still know this: In the above examples I used the element name as a selector but you can use any selector (class, id, etc.)

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead !


Original Link: https://dev.to/therajatg/sibling-combinator-in-css-goo

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To