General Sibling Selector in CSS
The general sibling selector in CSS allows you to select all the elements that are a sibling of another element, regardless of their type.
In other words, the general sibling selector matches elements that are sibling of the specified element, although it is not to be necessary the directly preceding element.
For example, if we have two <p> elements and both are siblings of an <h1> element, h1 ~ p { color: red; } will apply the CSS rule to both <p> elements that are siblings of an <h1> element.
The general sibling selector is part of CSS3. IE7 was the first version of Internet Explorer to support the general sibling selector, and Firefox 2 was the first version of Firefox to support it.
Syntax to Define General Sibling Selector in CSS
To create a general sibling selector in CSS, place a tilde character (~) between the simple selectors. The general syntax for creating general sibling selector is as follows:
element1 ~ element2 {
/* CSS properties: values; */
}
In the above syntax, element1 is the reference element, and element2 is the target element that comes after element1 in the document structure and you want to style. The general sibling selector will apply the CSS rule to all element2s that are siblings of element1.
Basic Examples Based on General Sibling Selector
Let’s take an example in which we will style all the paragraphs after a heading.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
h2 ~ p {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Section Title</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>
Output:
In this example, we have created a general sibling selector. Every <p> element that follows an <h2> element will have blue text and a bold font weight.
Let’s take an example in which we will apply styles to multiple types of siblings.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div ~ span {
color: white;
font-weight: bold;
background-color: red;
}
div ~ p {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div>First Div</div>
<span>First Span</span>
<div>Second Div</div>
<p>First Paragraph</p>
<span>Second Span</span>
<p>Second Paragraph</p>
</body>
</html>
Output:
In this example, we have created two general sibling selectors in CSS. The first general sibling selector will apply the CSS rule to both <span> elements, as they both follow at least one <div>. The second general sibling selector will apply the CSS rule to all <p> elements that follow the div element.
Combining General Sibling Selector with Other Selectors
In CSS, you can combine the general sibling selector with class selector, attribute selector, ID selector, and other types of different selectors. The combined selector allows you to select more specific elements within a webpage. Here’s how you can learn these combinations effectively with the help of examples.
Example 3: with Class Selector
<!DOCTYPE html>
<html>
<head>
<style>
.divE ~ .highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="divE">Div element.</div>
<p class="highlight">First paragraph.</p>
<p>Second paragraph.</p>
<p class="highlight">Third paragraph.</p>
</body>
</html>
In this example, we have combined two class selectors using general sibling selector (~). This selector will style all the <p> elements with class attribute value ‘highlight’.
The CSS rule will apply the background color to the first paragraph and third paragraph elements because they both have the class attribute value ‘highlight’ and follow the div element with class attribute value ‘divE’ in the HTML structure.
Example 4: with Attribute Selector
<!DOCTYPE html>
<html>
<head>
<style>
div[data-role="user"] ~ input[type="text"] {
background-color: lightyellow;
}
</style>
</head>
<body>
<div data-role="user">User Section</div>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Email" />
<input type="password" placeholder="Password" />
<input type="text" placeholder="Address" />
</body>
</html>
In this example, we have combined two attribute selectors using general sibling selector in CSS. This selector will apply the CSS rule to all sibling <input> elements with the type=”text” attribute that come after the div.
Thus, the CSS rule will apply a light yellow background to the “Name,” “Email,” and “Address” input fields, as they are inputs with type=”text” attributes that follow the div element with attribute data-role=”user”. The “Password” input is not affected because it is type=”password”.
Example 5: with ID Selector
<!DOCTYPE html>
<html>
<head>
<style>
#section-header ~ #important {
color: red;
}
</style>
</head>
<body>
<h2 id="section-header">Section Header</h2>
<p>Introduction paragraph.</p>
<p id="important">Important paragraph.</p>
<p>Conclusion paragraph.</p>
</body>
</html>
In this example, we have combined two ID selectors using general sibling selector (~). This selector will apply the CSS rule to the <p> element with id attribute value ‘important’ because it follows the h2 element with id attribute value ‘section-header’.
Example 6: with Pseudo-Classes
<!DOCTYPE html>
<html>
<head>
<style>
.highlight:hover ~ li {
color: white;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="highlight">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
In this example, we have combined general sibling selector with pseudo class in CSS that will change the background color of all <li> elements that follow the <li> element with class attribute value ‘highlight’ when hovered.
Common Errors
Here are some common mistakes to avoid that beginners do when they use the general sibling selector.
1. The general sibling selector only affects elements that are siblings of the specified reference element and come after it. It will not affect elements that are siblings of other siblings or come before the specified element.
Example 7:
<!DOCTYPE html>
<html>
<head>
<style>
.refElement ~ p {
color: blue;
}
</style>
</head>
<body>
<div class="refElement">Reference Element</div>
<p>First paragraph after reference.</p>
<p>Second paragraph after reference.</p>
<p>Third paragraph after reference.</p>
<div>This div element will not style.</div>
<p>Fourth paragraph after div element.</p>
<div class="refElement">Another Reference Element</div>
<p>Fifth paragraph after second reference element.</p>
</body>
</html>
In this example, the CSS rule will apply the style rules to all <p> elements that are siblings of the div element with class attribute value ‘refElement’ and come after it in the document structure.
2. Unlike the adjacent sibling selector (+), the general sibling selector does not need elements to be immediately next to each other. It applies to all siblings that follow the reference element.
Example 8:
<!DOCTYPE html>
<html>
<head>
<style>
h2 + p {
color: red;
}
</style>
</head>
<body>
<h2>Header</h2>
<p>First paragraph after header.</p>
<p>Second paragraph after header.</p>
<div>Some div element.</div>
<p>Third paragraph after div.</p>
</body>
</html>
In the example, we have combined two selectors using adjacent sibling selector (+). This selector h2 + p applies styles only to the immediate next sibling <p> element after the <h2>. In this case, only the “First paragraph after header.” will be red, as it is the immediate sibling following the <h2>.
Example 9:
<!DOCTYPE html>
<html>
<head>
<style>
h2 ~ p {
color: red;
}
</style>
</head>
<body>
<h2>Header</h2>
<p>First paragraph after header.</p>
<p>Second paragraph after header.</p>
<div>Some div element.</div>
<p>Third paragraph after div.</p>
</body>
</html>
In this example, we have combined two simple selectors using general sibling selector (~). This selector h2 ~ p applies styles to all <p> elements that are siblings of the <h2> and come after it, regardless of how many elements are in between.
Here, the “First paragraph after header,” “Second paragraph after header,” and “Third paragraph after div” will all be blue because they all follow the <h2> element in the document tree, even though some are not immediately next to the <h2> element.
In this tutorial, you have learned general sibling selector in CSS with the help of examples. You also learned how to combine different types of selectors using general sibling selector. I hope that you will have understood the basic syntax to create a general sibling selector and practiced all examples.
