Sibling Selectors: Adjacent and General

When you’re starting with CSS, it’s common to style elements one by one: all paragraphs, all headings, or a single element with an ID. But what if you want to style an element only when it sits next to another element?

That’s where sibling selectors come in. In this article, you’ll learn two powerful tools:

• Adjacent sibling selector: A + B
• General sibling selector: A ~ B

We’ll walk through simple, hands-on examples so you can see exactly how they work and use them in your own projects.

---

What are siblings in HTML?

Before we talk about selectors, let’s make sure "siblings" makes sense.

In HTML, siblings are elements that share the same parent.

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

Here, both <p> elements are siblings because they are inside the same <div>.

Sibling selectors let us style an element based on its neighbor elements inside the same parent.

---

Adjacent sibling selector: A + B

The adjacent sibling selector selects an element that comes immediately after another element.

The pattern is:

A + B { ... }

This means: “Select the first B that comes right after an A, with the same parent.”

Example 1: Highlight the paragraph after a heading

Let’s say we want to style the first paragraph after each heading.

HTML

<h2>Section 1</h2>
<p>This paragraph comes right after Section 1 heading.</p>
<p>This is another paragraph, not directly after the heading.</p>

<h2>Section 2</h2>
<p>This paragraph comes right after Section 2 heading.</p>

CSS

/* Style only the paragraph that comes immediately after any h2 */
h2 + p {
  font-weight: bold;      /* Make the text bold */
  color: darkblue;        /* Change text color to dark blue */
}

What happens?

• The first <p> after each <h2> becomes bold and dark blue.
• The second <p> after the first heading is not styled, because it’s not immediately after an <h2>.

So this selector is very strict: the elements must be right next to each other.

Try it yourself

Change the HTML so there’s another element between the <h2> and <p>:

<h2>Section 1</h2>
<span>Some inline text</span>
<p>This paragraph is no longer adjacent to the heading.</p>

Now the <p> will not get the h2 + p styles, because the <span> is in between. This is a great way to see how strict "adjacent" is.

---

General sibling selector: A ~ B

The general sibling selector is more relaxed.

The pattern is:

A ~ B { ... }

This means: “Select all B elements that come after an A (not necessarily right after), as long as they share the same parent.”

Example 2: Style all paragraphs after a heading

Let’s update the previous example and see the difference.

HTML

<h2>Section 1</h2>
<p>First paragraph after Section 1 heading.</p>
<p>Second paragraph after Section 1 heading.</p>

<h2>Section 2</h2>
<p>First paragraph after Section 2 heading.</p>
<div>A div in between</div>
<p>Another paragraph after Section 2 heading.</p>

CSS

/* Style all paragraphs that appear after an h2 (same parent) */
h2 ~ p {
  background-color: #f0f8ff; /* Light blue background */
  padding: 4px;              /* Small inner spacing */
}

What happens?

• Every <p> that comes after an <h2> with the same parent gets a light blue background.
• It doesn’t matter if there are other elements like <div> in between.

This selector is great when you want to style all following siblings, not just the first one.

---

Comparing + and ~ side by side

It’s easy to mix these up, so let’s compare with a single example.

Example 3: Both selectors together

HTML

<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

CSS

/* Adjacent sibling: only Paragraph 1 */
h2 + p {
  color: red;
}

/* General sibling: Paragraph 1, 2, and 3 */
h2 ~ p {
  font-style: italic;
}

Result

• Paragraph 1 is red and italic.
• Paragraph 2 and Paragraph 3 are only italic.

Why?

• h2 + p hits only the first <p> after <h2>.
• h2 ~ p hits all <p> elements after <h2>.

A good way to remember this:

• + means next door neighbor (right next to it).
• ~ means younger siblings (everyone that comes after).

Try it yourself

Change the second <p> to a <div> and see what happens:

<h2>Title</h2>
<p>Paragraph 1</p>
<div>Some other content</div>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

• h2 + p still only styles Paragraph 1.
• h2 ~ p still styles Paragraph 1, 2, and 3.

The presence of the <div> doesn’t affect the general sibling selector.

---

Practical use case: Form help messages

Let’s build something a bit more practical: a simple form where we style messages based on what they are next to.

Imagine we have error messages that should appear after inputs.

Example 4: Styling messages next to inputs

HTML

<form>
  <label>Email</label>
  <input type="email" />
  <span class="error">Please enter a valid email.</span>

  <label>Username</label>
  <input type="text" />
  <span class="hint">Use 4–12 characters.</span>

  <p>Some general note about the form.</p>
</form>

CSS

/* Style only error messages directly after an input */
input + .error {
  color: red;            /* Red text for errors */
  font-size: 0.9rem;     /* Slightly smaller text */
}

/* Style any hint appearing somewhere after an input */
input ~ .hint {
  color: #555;           /* Dark gray text for hints */
  font-style: italic;
}

What happens?

• The .error span right after the email <input> turns red and smaller.
• The .hint span (even though it follows the second input) gets gray, italic styling.

Here you can see how combining + and ~ lets you control how close elements should be to affect each other.

Try it yourself

• Move the .hint span so it is not after an input. For example, put it before the username <input>. The input ~ .hint style will no longer apply.
• Add another .error span that is not directly after an input and see that input + .error does not affect it.

This is a great way to understand how placement in the HTML structure matters.

---

Tips for beginners

• When something doesn’t style the way you expect, check the HTML structure. Are the elements really siblings? Is one nested inside another?
• Remember: adjacent (+) means immediately after, with nothing in between.
• General (~) means "any siblings that come later," not just the first.
• Use browser developer tools (right-click → Inspect) to see the structure and test selectors quickly.

---

Quick recap and what’s next

You’ve just learned how to:

• Use the adjacent sibling selector A + B to style an element that comes right after another.
• Use the general sibling selector A ~ B to style all later siblings of a certain type.
• Combine these selectors in real situations like headings and paragraphs or inputs and messages.

These may feel small, but they’re powerful building blocks. Every time you adjust styles based on how elements sit next to each other, you’re thinking like a front-end developer.

Next steps:

• Practice by styling different parts of a simple page—headings, lists, images, and notes.
• Try combining sibling selectors with classes, like h2 + .intro or input ~ .warning.

Keep experimenting, make small changes, and refresh your browser often. Each tiny success is proof that you’re making progress—keep going!