CSS Selectors: General Sibling Selector

Imagine you’re at a family gathering, and you want to tell something to all your cousins, not just the ones standing right next to you. You want to make sure your message reaches everyone who shares the same family level, regardless of where they are in the room. In web design, the General Sibling Selector in CSS works in a similar way. It lets you target all elements that share the same parent and come after a specified element, ensuring your styles are applied broadly but still within a certain context.

Table of Contents

What is the General Sibling Selector?

The General Sibling Selector is a powerful tool in CSS that targets all sibling elements that follow a specified element. It’s written using the tilde symbol (~). This selector is perfect for applying styles to multiple elements that share the same parent and come after a specific element, regardless of their direct adjacency.

Here’s how it looks:

first-element ~ sibling-element {
  color: blue;
}

And here’s an example in HTML:

<h2>Title</h2>
<p>This paragraph is a sibling that comes after the title.</p>
<p>This paragraph is also a sibling that comes after the title.</p>

In this example, if we use the General Sibling Selector h2 ~ p, it will style all paragraphs that come after the <h2> element and share the same parent as <h2>.

Why Use the General Sibling Selector?

Broad Targeting: The General Sibling Selector allows you to apply styles to multiple elements that share the same parent and come after a specified element, giving you broad but controlled styling.

Contextual Design: This selector helps you apply styles based on the context of elements within the same parent, ensuring that only relevant elements are targeted.

Cleaner CSS: By using the General Sibling Selector, you can avoid adding unnecessary classes or IDs, keeping your CSS cleaner and more maintainable.

Practical Examples

Let’s explore some practical examples to see how the General Sibling Selector can be used effectively.

Example 1: Styling Sibling Paragraphs

Want to style all paragraphs that come after a heading? Here’s how you can do it.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sibling Paragraphs</title>
	
    <style>
	
        h2 ~ p {
            color: darkred;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h2>Section Title</h2>
    <p>This paragraph is a sibling that comes after the heading.</p>
    <p>This paragraph is also a sibling that comes after the heading.</p>
	
</body>
</html>

In this example, the General Sibling Selector h2 ~ p styles all paragraphs that come after the <h2> element. It applies dark red text color and an 18px font size to these paragraphs.

Example 2: Highlighting Sibling List Items

Use the General Sibling Selector to style all list items that follow a specific list item.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sibling List Items</title>
	
    <style>
	
        .highlighted ~ li {
            background-color: lightblue;
            padding: 10px;
        }
		
    </style>
</head>
<body>

    <ul>
        <li>Item 1</li>
        <li class="highlighted">Item 2 (highlighted)</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
	
</body>
</html>

Here, the General Sibling Selector .highlighted ~ li styles all list items that follow the list item with the class “highlighted”. These list items receive a light blue background and padding.

Example 3: Styling Sibling Links in a Navigation Bar

Use the General Sibling Selector to style all links that follow a specific link in a navigation bar.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sibling Navigation Links</title>
	
    <style>
	
        .navbar a.selected ~ a {
            color: gray;
            text-decoration: underline;
        }
		
    </style>
</head>
<body>

    <div class="navbar">
        <a href="#">Home</a>
        <a href="#" class="selected">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
	
</body>
</html>

In this example, the General Sibling Selector .navbar a.selected ~ a styles all links that follow the link with the class “selected”. These links have gray text color and are underlined.

Example 4: Styling Sibling Form Fields

Use the General Sibling Selector to style all form fields that follow a specific input.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sibling Form Fields</title>
	
    <style>
	
        input[type="text"] ~ input[type="password"] {
            border: 2px solid orange;
        }
    </style>
</head>
<body>

    <form>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <input type="submit" value="Login">
    </form>
	
</body>
</html>

Here, the General Sibling Selector input[type=”text”] ~ input[type=”password”] styles all password input fields that follow a text input field. It adds an orange border to these password input fields.

Conclusion

The General Sibling Selector is a flexible and efficient tool in CSS, allowing you to target all sibling elements that follow a specified element. By mastering the General Sibling Selector, you can create clean, organized, and maintainable stylesheets that enhance your web designs. So, next time you want to style elements based on their sibling relationships, remember the General Sibling Selector — your key to broad yet controlled styling.