Understanding Sibling Selectors in CSS

CSS is the core of the design and presentation of a web application. It gives web developers a creative edge to produce visually stunning websites that stand out from the competition.

The combination of selectors, attributes, and values in rules, which allow you to control the appearance of HTML components, is the basis of CSS. When designing a website, there are some situations where style elements’ depend on its placement, hierarchy, or relationships of other parts inside the document. 

Sibling Selectors and Combinators come in handy, where the design is dependent on the element placement. While utilizing this technique has many advantages, one of the benefits that most people enjoy is that you may apply styles to specific items without adding any extra classes or IDs, resulting in less code clutter. Let’s dive into this tutorial and learn about CSS Combinators and Sibling Selectors. 

What are CSS Combinators?

CSS combinators are unique symbols or letters that tell browsers of the connections between various HTML elements. Based on their placement in the HTML text, it gives a clear notion of which elements’ styles need to be impacted by the CSS rules. To put it another way, CSS combinators tell the browser what to style and how to style it based on how they relate to other HTML elements.

There are four main types of CSS Combinators:

1. Descendant Selector (space)
2. Child Selector (>)
3. Adjacent sibling selector (+)
4. General sibling selector (~)

1. Descendant Selector (space)

The Descendant Selector is specified by whitespace in CSS and is a selector that helps in selecting elements that are descendants of the parent element. In simpler words, it selects things inside other things, or it selects elements that are nested inside other elements. 

Let’s understand how to use a Descendant Selector with the help of an example. In this example, we shall take all the ‘li’ elements that are only present inside the ‘About’ element, and not any other ‘li’ element.

<li>Home</li>
    <li>About
      <ul>
        <li>Our Team</li>
        <li>Our History</li>
      </ul>
    </li>
    <li>Contact</li>

.menu li ul li {
    /* CSS rules for nested <li> elements inside "About" */
color: red;
  }

2. Child Selector (>)

The Child selector is specified by a greater than (>) sign in CSS and is a selector that helps in selecting direct children of any specific parent element and applying styles to it. 

It only selects elements that are one level inside the parent element and ignores elements that are nested any level further. 

Let’s understand how to use a Child Selector with the help of an example. In this example, we shall target all the direct child elements of the ‘ul’ element and the styles don’t get applied to the rest of the elements nested further.

<ul class="menu">
    <li>Home</li>
    <li>About
      <ul>
        <li>Personal</li>
        <li>Careers</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>

/* Selects and styles only the direct children of the element with class "menu" */
.menu > li {
    color: red;
  }

3. Adjacent sibling selector (+)

The Adjacent Selector is specified by a plus sign (+) in CSS and is a selector that helps in selecting an element that is immediately followed by another element where both elements have the same parent element. 

Let’s understand how to use an Adjacent Sibling Selector with the help of an example. In this example, we shall select those ‘h3’ elements only that are followed by an ‘h2’ element only and don’t target any other ‘h3’ element.

<p>paragraph</p>
<h3>This will not be targeted.</h3>
<h1>Heading 1</h1>
<h3>This will not be targeted.</h3>
<h2>Heading 2</h2>
<h3>This will be targeted.</h3>
<h2>Heading 2</h2>
<h3>This will be targeted.</h3>

/* Selects the <h3> element that comes right after an <h2> element */
h2 + h3{
color: red;
  }

4. General sibling selector (~)

The General Selector is specified by a tilde sign (~) in CSS and is a selector that helps in selecting the sibling elements of the same parent without them even being adjacent to each other.

In other words, unlike the Adjacent Sibling selector which selects only the elements that immediately follow a specific element, the General Sibling Selector selects the element that shares the same parent element regardless of them being adjacent or not. 

Let’s understand how to use a General Sibling Selector with the help of an example. In this example, we shall select a specific element and other elements that share the same parent element and not only the element that is preceded by a particular element. 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

li ~ li {
    color: red;
}

Browser Compatibility of Sibling Selectors in CSS

Sibling Selectors have been floating around the market for a very long time, so you may use them with confidence in the majority of current browsers. Sibling Selectors is a component of CSS2, the second version of CSS, whereas CSS3 is the most recent version, therefore it has been in practice for a while.

According to the caniuse.com, here’s the browser compatibility for the CSS Sibling Selectors across modern web browsers:

1. Internet Explorer: Sibling selectors are supported in Internet Explorer 7 and later versions.
2. Edge: Sibling selectors are supported in all versions of Microsoft Edge.
3. Firefox: Sibling selectors are supported in all versions of Firefox.
4. Chrome: Sibling selectors are supported in all versions of Google Chrome.
5. Safari: Sibling selectors are supported in all versions of Safari.
6. Opera: Sibling selectors are supported in all versions of Opera.

Source

To ensure that the CSS combinators are performing consistently across different browsers, you can test your website on real devices and browsers using BrowserStack Live.

Test on Real Devices

How to use Sibling Selectors in Selenium for Testing

Selenium is among the most popular testing tools that support several scripts such as PHP, Java, Python, Perl, C#, and Ruby. It is supported across numerous browsers like Safari, Chrome, Firefox, etc., and several operating systems like Windows, Linux, macOS, Solaris, and more. 

Now, let’s understand how to leverage CSS Sibling Selectors in testing using Selenium.

Test on Cloud Selenium Grid

To locate a Sibling Selector in Selenium, use the plus (+) sign that separates the two selectors and matches the adjacent sibling element that has the same parent element.

The syntax to select any element using the CSS Sibling Selector is as follows.

tagName[AttributeName='AttributeValue'] + tagName[AttributeName='AttributeValue']

Best Practices for using CSS Selectors

The ultimate power to build a website that can draw users from all over the world and appeal to them is CSS. With such immense power comes great responsibility, and that responsibility is to use CSS intelligently and make the most of it. Let’s now talk about some of the best practices for employing CSS selectors to produce effective CSS code and the resulting webpage. 

• Use Sibling Selectors rarely: If you use CSS selectors more often, it will create cluttering and complex code that doesn’t encourage collaboration among other stakeholders of the project. It’s also a good idea to keep up with any trends or concerns with sibling selector compatibility. 
• Thorough Testing: Even though CSS selectors are widely used and supported by practically every one of the modern browser versions, testing the Sibling selectors is still important to make sure they function as expected across all of the platforms you’re aiming for. 
• Improve Maintainability: Make sure to add comments while using Sibling Selectors to define the intent of your CSS code to make it more maintainable. In order to make the CSS code easier to read, you should also avoid deep nesting. Additionally, it enables any additional developers to correctly comprehend the CSS code. 
• Document your Styles: It goes without saying that different developers have different coding styles, but one should maintain a style documentation that explains how to use a variety of CSS techniques, including Sibling Selectors. 

Conclusion

In the field of web development, CSS is essential to the creation of web page designs. A significant percentage of a webpage’s control can be performed with CSS, thus it’s important to learn several ways that make this route more effective. 

In this article, we looked at one such CSS technique called sibling selectors, which makes it simpler to style web items according to their arrangement in the HTML directory. We learned about CSS combinators, several CSS combinators, and two important Sibling Selectors, Adjacent Sibling Selector and General Sibling Selector, during the tutorial. 

We also learned about some of the best practices one must adhere to create an effective CSS script, which will help one to fully utilize Sibling Selectors in CSS.