## CSS3 General Sibling Selector (`element1 ~ element2`)
The CSS3 **General Sibling Selector** (`element1 ~ element2`) is a powerful combinator used to select elements that share the same parent and follow a specified element.
This tutorial provides a comprehensive guide on how to use the general sibling selector, complete with practical examples, browser compatibility notes, and best practices.
---
## Definition and Usage
The `element1 ~ element2` selector matches every occurrence of `element2` that is preceded by `element1`, provided they both share the same parent element.
### Key Rules:
1. **Shared Parent:** Both `element1` and `element2` must belong to the same parent element.
2. **Precedence:** `element2` must appear *after* `element1` in the HTML document structure.
3. **Non-Consecutive Matching:** Unlike the Adjacent Sibling Selector (`+`), `element2` does **not** need to immediately follow `element1`. There can be other elements separating them.
---
## Syntax
```css
element1 ~ element2 {
/* CSS properties */
}
```
* **`element1`**: The reference element.
* **`~`**: The general sibling combinator.
* **`element2`**: The target element(s) to be styled.
---
## Code Examples
### Example 1: Basic Usage
In this example, we style every `
` element that comes after a `` element, as long as they share the same parent.
#### CSS:
```css
p ~ ul {
background-color: #ff0000;
color: #ffffff;
padding: 10px;
}
```
#### HTML:
```html
Heading (Sibling 1)
This is a paragraph (Sibling 2).
- This list will have a red background because it follows the paragraph.
- This ordered list is not affected.
- This list will also have a red background because it follows the paragraph, even though an
is in between.
```
### Example 2: Interactive UI Components (CSS-Only Tabs/Toggles)
The general sibling selector is frequently used in modern CSS-only interactive components, such as custom checkboxes, accordions, or tabs.
#### CSS:
```css
/* Hide the default checkbox */
input {
display: none;
}
/* Style the label that acts as the button */
label {
padding: 8px 16px;
background-color: #e0e0e0;
cursor: pointer;
display: inline-block;
}
/* Style the content box that follows the checkbox */
input ~ .content-box {
display: none;
margin-top: 10px;
padding: 15px;
border: 1px solid #ccc;
}
/* Reveal the content box when the checkbox is checked */
input:checked ~ .content-box {
display: block;
background-color: #f9f9f9;
}
```
#### HTML:
```html
```
---
## Comparison: General Sibling (`~`) vs. Adjacent Sibling (`+`)
To avoid confusion, it is important to understand how the General Sibling selector differs from the Adjacent Sibling selector:
| Selector | Syntax | Description |
| :--- | :--- | :--- |
| **Adjacent Sibling** | `A + B` | Selects element `B` **only** if it immediately follows element `A`. |
| **General Sibling** | `A ~ B` | Selects **all** elements `B` that follow element `A`, regardless of whether they are adjacent or separated by other elements. |
---
## Browser Support
The general sibling selector is widely supported across all modern web browsers.
| Chrome | Edge/IE | Firefox | Safari | Opera |
| :---: | :---: | :---: | :---: | :---: |
| Yes | Yes (IE7+)* | Yes | Yes | Yes |
> **Note for Legacy Browsers:** To ensure proper rendering and support in Internet Explorer 8 and earlier versions, you must declare a valid HTML `` at the very top of your document.
YouTip