What is the difference between general sibling and adjacent sibling combinators in CSS?

Combinators

css-logo When making the differentiation between general sibling and adjacent sibling combinators, ask yourself if you want to target every sibling of the target element, or just the very next one.

In CSS, HTML element relationships play an important role in targeting. It’s true that you can use IDs, which means that your CSS selector can potentially be very simple. In most cases, however, IDs are not recommended. So, if you want to write CSS that is expressive and reusable, the relationship between HTML elements starts to matter.

Consequently, the concept of sibling relationships is an important one in CSS. In fact, other than parent-child relationships, the concept of siblings is possibly the one that you will need to consider most. So, with that in mind, let’s begin with the concept that there is more than one kind of sibling. And because HTML elements have order in the markup, you’ll have to decide whether you want to target ALL siblings of an element, or just the very NEXT one. The difference between these two scenarios is: when targeting ALL siblings of an element, you will be styling only one or many HTML elements. But when targeting the adjacent sibling of an element, you are styling one element. This is the difference between general sibling and adjacent sibling combinators in CSS: it’s a question of targeting one sibling or multiple siblings.

Let’s say you have 10 elements, and they all have black text. If you wanted to make every sibling of the element red text, then there would be nine elements with red text. If you wanted to just target the very next sibling after the first element, then you would have just one element with red text. That is, when you target just the very next sibling, you are targeting only one element.

Example # 1 – General Sibling Combinators

See the Pen CSS General Sibling Combinator by Front End Video (@frontendvideo) on CodePen.

In Example # 1, we have an unordered list of days. We use the general sibling combinator, which targets every sibling of: li:first-child.

Example # 2 – Adjacent Sibling Combinators

See the Pen CSS Adjacent Sibling Combinator by Front End Video (@frontendvideo) on CodePen.

In Example # 2, we use the adjacent sibling combinator. This targets only the very next sibling of li:first-child. As a result, only one of the list items has a blue background.

This is a case in which you are styling multiple HTML elements. Keep in mind that there could be only one general sibling combinator. For example, there could be two siblings total, but you target all general siblings of the first sibling. In that case, there is only one general sibling.  But if there was a total of 10 siblings, and you targeted all general siblings of the first sibling, then you would wind up styling nine HTML elements. In Example # 1, there is a total of seven siblings, so you wind up styling six HTML elements. And if you targeted all general siblings of the second sibling, then you’d wind up styling five HTML elements.

This is a case in which you are styling a single HTML element, and here, there can only be one adjacent sibling of any element. A similar concept would be an array element, in which there can only be one element that is right AFTER a given array element. Likewise, with HTML elements, there can only be one adjacent sibling. Therefore, the adjacent sibling combinator will always style exactly one element.

But it is important to keep in mind that when you use the adjacent sibling combinator, you could wind up styling multiple elements. Let’s say, for example, that you target the adjacent sibling of the first list item in an unordered list. That would result in styling one HTML element. But if you have two unordered lists, the net effect would be that TWO HTML elements are styled. This is because your selector applied to TWO places in your page. In other words, there are TWO places in your HTML code where your selector makes sense. So, while we say that the adjacent sibling combinator results in targeting one HTML element, that effect could take place multiple times in your web page.

Summary

Keep in mind that relationships matter in CSS selectors. For example, while the parent-child relationship is a common one, sibling relationships are as well. General sibling and adjacent sibling combinators both provide a powerful mechanism for targeting HTML elements, and the difference between these sibling combinators is how many HTML elements will be affected. With the general sibling combinator, one or potentially multiple elements will be styled. With the adjacent sibling combinator, only one element will be styled. But, don’t forget, the net effect of your adjacent sibling combinator targeting could wind up affecting multiple HTML elements if your selector connects with multiple locations in your web page.