Adjacent sibling selector and general sibling selector

Adjacent sibling selectors and general sibling selectors are selectors in CSS used to target sibling elements that share the same parent. They are highly practical for styling, allowing precise targeting of elements at specific positions in the document structure.

Adjacent Sibling Selector (+)

The adjacent sibling selector uses a plus sign (+) to connect two selectors, matching the second element that immediately follows the first. Both elements must share the same parent, and the second element must be directly adjacent to the first.

Basic Syntax

selector1 + selector2 {
  /* Style rules */
}

Example 1: Styling the Immediately Following Paragraph

Given the following HTML structure:

<h2>Title</h2>
<p>First paragraph</p>
<p>Second paragraph</p>

Using the adjacent sibling selector:

h2 + p {
  color: red;
}

Only the first <p> immediately following <h2> will turn red; the second <p> remains unaffected.

Example 2: Spacing Control for Form Elements

<label>Username:</label>
<input type="text">
<label>Password:</label>
<input type="password">

Add spacing between adjacent <label> and <input> elements:

label + input {
  margin-left: 10px;
}

Notes

• If there are other elements (like comments or text nodes) between the two elements, the selector still works.
• Only targets directly adjacent sibling elements; non-consecutive siblings are not selected.

General Sibling Selector (~)

The general sibling selector uses a tilde (~) to connect two selectors, matching all sibling elements that follow the first element, regardless of whether they are directly adjacent.

Basic Syntax

selector1 ~ selector2 {
  /* Style rules */
}

Example 1: Styling All Paragraphs After a Heading

<h2>Section Title</h2>
<p>Paragraph 1</p>
<div>Divider content</div>
<p>Paragraph 2</p>

Using the general sibling selector:

h2 ~ p {
  font-style: italic;
}

Both Paragraph 1 and Paragraph 2 will become italic, even though they are separated by a <div>.

Example 2: Highlighting Subsequent List Items Dynamically

<ul>
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Change all <li> elements after .active to gray:

.active ~ li {
  color: #999;
}

Notes

• Matches all subsequent sibling elements starting from the first element, not limited to direct adjacency.
• If the second selector is the same as the first (e.g., div ~ div), the first element itself is not selected.

Comparison and Use Cases

Key Differences

Practical Examples

Example 1: Navigation Menu Separators

<nav>
  <a href="#">Home</a>
  <a href="#">Products</a>
  <a href="#">Services</a>
</nav>

Add separators between navigation links (except the first one):

a + a {
  border-left: 1px solid #ccc;
  padding-left: 10px;
}

Example 2: Collapsible Panel Control

<div class="trigger">Click to expand</div>
<div class="content">Hidden content...</div>
<div class="content">More content...</div>

Expand all subsequent content blocks when the trigger is clicked:

.trigger:focus ~ .content {
  display: block;
}

Example 3: State-Based Styling

<input type="checkbox" id="toggle">
<label for="toggle">Toggle</label>
<p>Description 1</p>
<p>Description 2</p>

Change the color of all subsequent paragraphs when the checkbox is checked:

#toggle:checked ~ p {
  color: blue;
}

Advanced Techniques and Combinations

Combining with Attribute Selectors

input[type="text"] ~ button {
  background-color: #f0f0f0;
}

Using with Pseudo-Classes

li:first-child ~ li {
  border-top: 1px dashed #ddd;
}

Usage in Nested Structures

<section>
  <h3>Subtitle</h3>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</section>

Target all .box elements at the same level:

h3 ~ .box {
  border: 1px solid blue;
}

Performance Considerations

• Performance differences are negligible in modern browsers.
• Avoid overuse in deeply nested structures (e.g., body ~ div).