CSS Adjacent Sibling Selector

The Adjacent Sibling Selector in CSS is a powerful tool that allows you to apply styles to an HTML element based on its relationship to an immediately preceding sibling element. Understanding how to effectively utilize this selector can enhance your web development projects by enabling sophisticated styling without cluttering your HTML with excess classes or IDs.

What is the Adjacent Sibling Selector?

The Adjacent Sibling Selector is denoted by the + symbol. It selects an element that is directly after another specific element, meaning they share the same parent. This is particularly useful when you want to apply styles to one element based on the type of another element that comes immediately before it.

How to Use the Adjacent Sibling Selector

To use the Adjacent Sibling Selector, you simply write the selector for the first element followed by the + symbol and then the selector for the second element. The syntax is as follows:

selector1 + selector2 {
    property: value;
}

In this case, selector1 is the first element, and selector2 is the second element that we want to style. It’s important to remember that the second selector will only be selected if it immediately follows the first one in the document structure.

Example of the Adjacent Sibling Selector

Let’s see a basic example to illustrate how the Adjacent Sibling Selector works:

<h1>Title</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

p + p {
    color: blue;
}

In this example, the style will only be applied to the second paragraph because it is immediately preceded by the first paragraph. The result will be that the second paragraph text will be displayed in blue.

More Examples

Let’s explore some additional, practical examples.

<h2>Heading Level 2</h2>
<p>First paragraph.</p>
<p>Second paragraph.</p>

h2 + p {
    font-weight: bold;
}

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

li + li {
    color: red;
}

Responsive Examples

It’s essential for modern web development to ensure that your designs respond well to different screen sizes. Here are two responsive example snippets using the Adjacent Sibling Selector:

<div class="container">
    <h2>Welcome</h2>
    <p>This is a simple introduction.</p>
    <p>This is more detailed information.</p>
</div>

.container {
    padding: 20px;
    background-color: #f2f2f2;
}

h2 + p {
    color: green;
}

@media (max-width: 600px) {
    h2 + p {
        font-size: 14px;
        color: orange;
    }
}

In this example, the first paragraph following the heading will be styled green. However, when the screen width is less than 600 pixels, it will change to orange and its size will reduce to 14 pixels.

Browser Support

The Adjacent Sibling Selector has broad support across modern browsers including:

FAQ

1. What is the Adjacent Sibling Selector?

The Adjacent Sibling Selector selects an element that is immediately preceded by a specific element sharing the same parent.

2. How do you write the Adjacent Sibling Selector?

Use the syntax: selector1 + selector2 for the styles to be applied only if selector2 follows selector1 directly.

3. Can I use Adjacent Sibling Selector for multiple HTML elements?

No, the Adjacent Sibling Selector only works with the next sibling element. You need to apply additional selectors if you want to target other elements.

4. What happens if the second element is not the immediate next sibling?

The rule will not apply if selector2 is not immediately following selector1.