CSS General Sibling Selector (~)

What You’ll Learn

The general sibling combinator element1 ~ element2 selects every sibling that follows the first element. Use it when you need to style all later siblings, not just the immediate next one.

Introduction

The general sibling combinator element1 ~ element2 in CSS selects an element that is a sibling of another specified element. Both elements must share the same parent and the matched element must appear after the first one in the document.

This selector is particularly useful for applying styles to multiple elements that follow a heading, label, or section marker — without adding extra classes to every sibling.

Definition and Usage

Write the first selector, a tilde (~), then the second selector. Every matching element2 that comes after element1 at the same nesting level receives the styles. Other elements may appear between them; unlike +, they do not break the match.

📝 Syntax

The signature of the general sibling selector is:

element1 ~ element2 {
  /* CSS properties */
}

This syntax targets element2 when it is preceded by element1 and both elements share the same parent.

Basic Example

h2 {
  color: #2563eb;
}

h2 ~ p {
  color: #15803d;
  font-style: italic;
}

+ vs ~ Comparison

Syntax Rules

• Both elements must be siblings under the same parent.
• Only siblings that come after element1 are matched.
• Other elements may appear between the two siblings (unlike +).
• Spaces around ~ are conventional: h2 ~ p.
• Works with types, classes, IDs, and attribute selectors.

Related Selectors

• element + element — adjacent sibling (next only)
• element > element — direct child combinator
• element element — descendant combinator

When to Use element ~ element

The general sibling combinator is ideal when multiple elements follow a marker:

• Section body text — Style all paragraphs after a heading in an article block.
• Form groups — Apply spacing or color to every label after a checkbox input.
• FAQ lists — Style all answer paragraphs that follow a question heading.
• Repeating rows — Use .row ~ .row for borders between stacked items.
• Toggle panels — Style content blocks that follow a control element as siblings.

Examples Gallery

Practice the ~ combinator with headings, sections, forms, and + vs ~ comparisons.

h2 {
  color: #2563eb;
}

h2 ~ p {
  color: #15803d;
  font-style: italic;
}

.section-title ~ p {
  color: #475569;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.section-title ~ p:last-of-type {
  margin-bottom: 0;
}

input[type="checkbox"] ~ label {
  display: block;
  margin-left: 1.5rem;
  color: #334155;
  font-size: 0.875rem;
}

input[type="checkbox"]:checked ~ label {
  color: #15803d;
  font-weight: 600;
}

/* Adjacent: only the first paragraph */
h2 + p {
  color: #2563eb;
  font-weight: 600;
}

/* General: all paragraphs after h2 */
h2 ~ p {
  color: #15803d;
  font-style: italic;
}

💬 Usage Tips

• Style many siblings at once — Use ~ instead of repeating classes on every element.
• Combine with pseudo-classes — Patterns like input:checked ~ .panel enable toggle UIs without JavaScript.
• Scope with a parent class — Write .article h2 ~ p to limit matches to one section.
• Prefer + for spacing — Use .item + .item for gap between consecutive items; use ~ when all following items need the same style.
• Read HTML top to bottom — Remember that only siblings after the first selector are matched.

⚠️ Common Pitfalls

• Only following siblings — Elements before element1 are never matched by ~.
• Must share a parent — Nested descendants are not siblings; the combinator will not match them.
• Confusing + and ~ — + stops at the next sibling; ~ continues through all later siblings.
• New headings reset context — Paragraphs after a second <h2> match relative to that heading, not the first one.
• Over-broad rules — A bare h2 ~ p on a complex page may style more paragraphs than intended; scope when needed.

♿ Accessibility

• Do not hide content with CSS alone — Avoid using sibling selectors to remove important text from view.
• Form associations — Prefer <label for="id"> over relying solely on sibling layout for accessibility.
• Color contrast — Styled sibling text must still meet WCAG contrast ratios.
• Focus order — Sibling-based form layouts should preserve logical tab order in HTML.
• Semantic structure — Use proper heading levels so screen readers benefit from your section patterns.

💡 Best Practices