CSS Adjacent and General Sibling Selectors Tutorial

Introduction

CSS can select elements by tag name, class, ID, and where they appear inside other elements.

CSS can also select elements based on nearby sibling elements.

Sibling selectors are useful when elements share the same parent and you want to style one element depending on what appears before it.

For example, you may want to add spacing only to paragraphs that come after another paragraph:

1p + p {2  margin-top: 1rem;3}

Or you may want to style every paragraph that comes after a heading in the same section:

1h2 ~ p {2  color: #333333;3}

The two main sibling selectors are:

1adjacent sibling selector: +2general sibling selector: ~

The adjacent sibling selector targets the next matching sibling immediately after another element.

The general sibling selector targets later matching siblings after another element, even when they are not immediately next to it.

These selectors are useful for styling elements based on order and relationship in the HTML structure.

What Is a Sibling Element?

Sibling elements are elements that share the same parent.

Example:

1<section>2  <h2>CSS Selectors</h2>3  <p>First paragraph.</p>4  <p>Second paragraph.</p>5</section>

In this example, the <h2> and both <p> elements are siblings because they are all directly inside the same <section>.

The <section> is the parent.

The <h2> and paragraphs are children of that parent.

Because they share the same parent, CSS sibling selectors can be used between them.

Siblings Must Share the Same Parent

Sibling selectors only work when elements share the same parent.

This works:

1<section>2  <h2>Heading</h2>3  <p>Paragraph.</p>4</section>

The <h2> and <p> are siblings.

This does not work in the same way:

1<section>2  <h2>Heading</h2>3  <div>4    <p>Paragraph.</p>5  </div>6</section>

The <h2> and <p> are not siblings.

The <p> is inside the <div>.

The <h2> and <div> are siblings, but the <h2> and nested <p> are not.

This matters when using + and ~.

What Is the Adjacent Sibling Selector?

The adjacent sibling selector uses the plus symbol:

1+

It selects an element that comes immediately after another element, as long as both elements share the same parent.

Example:

1h2 + p {2  font-weight: bold;3}

This means:

1select a p element that comes immediately after an h2 element

Only the next matching sibling is selected.

If something else appears between the <h2> and the <p>, the selector will not match.

Adjacent Sibling Selector Example

HTML:

1<section>2  <h2>About CSS</h2>3  <p>This paragraph comes immediately after the heading.</p>4  <p>This is another paragraph.</p>5</section>

CSS:

1h2 + p {2  font-size: 1.2rem;3}

This selects the first paragraph because it comes immediately after the <h2>.

It does not select the second paragraph.

The second paragraph comes after another paragraph, not immediately after the heading.

Adjacent Means Immediately Next

The adjacent sibling selector is strict.

HTML:

1<section>2  <h2>About CSS</h2>3  <img src=”css-diagram.png” alt=”CSS diagram”>4  <p>This paragraph is after the image.</p>5</section>

CSS:

1h2 + p {2  font-weight: bold;3}

This does not select the paragraph.

Why?

Because the paragraph is not immediately after the <h2>.

The <img> is immediately after the <h2>.

The adjacent sibling selector only checks the next sibling.

What Is the General Sibling Selector?

The general sibling selector uses the tilde symbol:

1~

It selects matching sibling elements that come after another element, as long as they share the same parent.

Example:

1h2 ~ p {2  color: #333333;3}

This means:

1select p elements that come after an h2 element and share the same parent

Unlike the adjacent sibling selector, the general sibling selector does not require the element to be immediately next.

It can match later siblings.

General Sibling Selector Example

HTML:

1<section>2  <h2>About CSS</h2>3  <img src=”css-diagram.png” alt=”CSS diagram”>4  <p>First paragraph after the heading.</p>5  <p>Second paragraph after the heading.</p>6</section>

CSS:

1h2 ~ p {2  color: navy;3}

This selects both paragraphs.

The paragraphs are not immediately after the heading, but they are later siblings of the <h2>.

The image does not stop the general sibling selector from finding later matching paragraphs.

Adjacent vs General Sibling Selectors

The difference is how far the selector can reach.

Adjacent sibling selector:

1h2 + p {2  color: navy;3}

This selects only the first <p> immediately after an <h2>.

General sibling selector:

1h2 ~ p {2  color: navy;3}

This selects all later <p> siblings after an <h2>.

A simple comparison:

1h2 + p:2selects the next p immediately after h23 4h2 ~ p:5selects later p siblings after h2

Both selectors only look forward.

They do not select previous siblings.

Sibling Selectors Only Look Forward

Sibling selectors select elements that come after the first selector.

Example:

1h2 + p {2  color: navy;3}

This can select a paragraph after a heading.

It cannot select a heading before a paragraph.

HTML:

1<section>2  <p>Intro text.</p>3  <h2>Section Heading</h2>4</section>

The selector h2 + p does not select the paragraph because the paragraph comes before the heading.

CSS sibling selectors work from left to right through later siblings.

Styling Paragraphs After Headings

A common use of the adjacent sibling selector is styling the first paragraph after a heading.

HTML:

1<article>2  <h2>CSS Layout</h2>3  <p>This first paragraph introduces the section.</p>4  <p>This second paragraph gives more detail.</p>5</article>

CSS:

1h2 + p {2  font-size: 1.1rem;3  font-weight: bold;4}

This styles only the first paragraph after the heading.

This can be useful for introductions, summaries, or lead paragraphs.

Adding Space Between Consecutive Paragraphs

Another common use is spacing between paragraphs.

HTML:

1<article>2  <p>First paragraph.</p>3  <p>Second paragraph.</p>4  <p>Third paragraph.</p>5</article>

CSS:

1p + p {2  margin-top: 1rem;3}

This applies margin to any paragraph that immediately follows another paragraph.

The first paragraph does not get top margin.

The second and third paragraphs do.

This is a useful spacing pattern because it adds space between paragraphs rather than above every paragraph.

Styling Elements After Images

You can use adjacent sibling selectors to style text after images.

HTML:

1<figure>2  <img src=”layout-example.png” alt=”Example layout”>3  <figcaption>A simple layout example.</figcaption>4</figure>

CSS:

1img + figcaption {2  font-size: 0.9rem;3  color: #555555;4}

This selects a <figcaption> that comes immediately after an <img>.

This is useful when the caption is directly associated with the image.

Styling Lists After Headings

You can style a list that immediately follows a heading.

HTML:

1<section>2  <h2>Topics Covered</h2>3  <ul>4    <li>Selectors</li>5    <li>Properties</li>6    <li>Values</li>7  </ul>8</section>

CSS:

1h2 + ul {2  margin-top: 0.5rem;3}

This selects the unordered list only when it comes immediately after an <h2>.

This can be useful for controlling spacing in article sections.

Styling All Later Paragraphs After a Heading

The general sibling selector can style all later matching siblings.

HTML:

1<section>2  <h2>Important Notes</h2>3  <p>First note.</p>4  <p>Second note.</p>5  <p>Third note.</p>6</section>

CSS:

1h2 ~ p {2  color: #333333;3}

This selects all three paragraphs because they all come after the heading and share the same parent.

This is broader than h2 + p.

Use it when several later siblings should be affected.

Styling Items After a Special Marker

The general sibling selector is useful when one element acts as a marker for later elements.

HTML:

1<ul class=”task-list”>2  <li>Set up HTML</li>3  <li class=”current”>Write CSS</li>4  <li>Test layout</li>5  <li>Publish page</li>6</ul>

CSS:

1.current ~ li {2  color: #777777;3}

This selects list items after the item with class="current".

It does not select the current item.

It does not select earlier items.

This can be useful for steps, timelines, menus, and progress lists.

Styling Messages After an Error

Sibling selectors can help style messages that appear after form controls.

HTML:

1<label for=”email”>Email address</label>2<input type=”email” id=”email” class=”has-error”>3<p class=”error-message”>Please enter a valid email address.</p>

CSS:

1.has-error + .error-message {2  color: red;3}

This selects the error message only when it immediately follows an element with class="has-error".

This pattern depends on the HTML order.

If the error message is not immediately after the input, the adjacent sibling selector will not match.

Sibling Selectors in Forms

Sibling selectors are often useful in forms.

HTML:

1<div class=”form-row”>2  <input type=”checkbox” id=”subscribe”>3  <label for=”subscribe”>Subscribe to updates</label>4</div>

CSS:

1input + label {2  margin-left: 0.5rem;3}

This adds space to a label that immediately follows an input.

This can be useful for checkboxes and radio buttons.

However, remember that the selector depends on the label coming after the input.

If the label comes before the input, this selector will not match.

Adjacent Sibling Selector with Classes

You can use adjacent sibling selectors with classes.

HTML:

1<div class=”notice”>Important update</div>2<p class=”notice-text”>This update affects your account.</p>

CSS:

1.notice + .notice-text {2  margin-top: 0.5rem;3}

This selects .notice-text only when it immediately follows .notice.

If another element appears between them, the selector will not match.

This is useful when two components are designed to appear together.

General Sibling Selector with Classes

You can also use the general sibling selector with classes.

HTML:

1<div class=”start-marker”>Start here</div>2<p class=”step”>Step one</p>3<p class=”step”>Step two</p>4<p class=”step”>Step three</p>

CSS:

1.start-marker ~ .step {2  border-left: 3px solid navy;3}

This selects all .step elements that come after .start-marker.

They do not need to be immediately after it.

They only need to be later siblings with the same parent.

Sibling Selectors with IDs

Sibling selectors can also use IDs.

HTML:

1<h2 id=”setup”>Setup</h2>2<p>Install the project files.</p>3<p>Open the folder in your editor.</p>

CSS:

1#setup ~ p {2  color: #333333;3}

This selects paragraphs that come after the element with id="setup" and share the same parent.

IDs should still be unique.

For reusable patterns, classes are usually better.

Combining Sibling Selectors with Other Selectors

Sibling selectors can be combined with classes, IDs, type selectors, and pseudo-classes.

Example:

1.card h2 + p {2  font-size: 1.1rem;3}

This means:

1inside .card, select a p that immediately follows an h2

HTML:

1<article class=”card”>2  <h2>Card Title</h2>3  <p>This paragraph is selected.</p>4</article>

This selector is useful when the relationship matters only inside a component.

Sibling Selectors and Spacing Systems

Sibling selectors are useful for spacing because they can avoid adding extra space before the first item.

Example:

1.stack > * + * {2  margin-top: 1rem;3}

This selector means:

1inside .stack, select each direct child that immediately follows another direct child

HTML:

1<div class=”stack”>2  <h2>Title</h2>3  <p>First paragraph.</p>4  <p>Second paragraph.</p>5  <a href=”next.html”>Continue</a>6</div>

The first child does not get top margin.

Every following child gets top margin.

This creates consistent vertical spacing between direct children.

Understanding .stack > * + *

This selector may look advanced:

1.stack > * + * {2  margin-top: 1rem;3}

Break it down:

1.stack = an element with class=”stack”2> = direct child3* + * = any element immediately after another element

Together, it selects every direct child of .stack except the first one.

This is useful for layout spacing because it adds space between items without adding unwanted space above the first item.

It is a common pattern in modern CSS.

Sibling Selectors Do Not Select Parents

Sibling selectors cannot select a parent based on a child.

For example:

1input + label {2  color: navy;3}

This can style a label after an input.

It cannot style the parent .form-row based on whether it contains that input.

Modern CSS has a :has() selector that can sometimes select parents based on children, but that is a different topic.

Sibling selectors work between sibling elements.

They do not move upward to parent elements.

Sibling Selectors Do Not Select Previous Elements

Sibling selectors only select later siblings.

Example:

1<p class=”intro”>Intro paragraph.</p>2<h2>Section Heading</h2>

CSS:

1h2 + p {2  color: navy;3}

This does not select the intro paragraph because it comes before the heading.

There is no basic CSS selector that means “select the previous sibling” using only + or ~.

The selected element must come after the first selector.

Using Sibling Selectors Carefully

Sibling selectors are powerful, but they depend on HTML order.

This can be good when order is meaningful.

For example:

1h2 + p {2  font-size: 1.1rem;3}

This clearly targets an introductory paragraph after a heading.

However, if the HTML structure changes, the selector may stop matching.

For example, adding an image between the heading and paragraph breaks h2 + p.

If the relationship is important but not always immediate, use ~ or add a class.

When a Class Is Better

Sometimes a class is clearer than a sibling selector.

Sibling selector:

1h2 + p {2  font-size: 1.1rem;3}

Class-based approach:

1<p class=”section-intro”>This paragraph introduces the section.</p>

CSS:

1.section-intro {2  font-size: 1.1rem;3}

The class approach does not depend on the paragraph’s exact position.

Use sibling selectors when the structure itself is the reason for the style.

Use classes when the element has a role that should remain styled even if the order changes.

Adjacent Sibling Selector Specificity

The + symbol does not add specificity by itself.

Example:

1h2 + p {2  color: navy;3}

The specificity comes from h2 and p.

The plus symbol only describes the relationship between them.

It tells the browser that the paragraph must immediately follow the heading.

The same principle applies to the general sibling selector.

General Sibling Selector Specificity

The ~ symbol also does not add specificity by itself.

Example:

1.current ~ li {2  color: #777777;3}

The specificity comes from .current and li.

The tilde symbol describes the sibling relationship.

It tells the browser that the <li> must come after .current and share the same parent.

Combinators such as +, ~, >, and spaces affect matching, not specificity by themselves.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Sibling Selectors Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <article class=”article-content”>12      <h1>CSS Sibling Selectors</h1>13 14      <p>15        This first paragraph comes immediately after the heading.16      </p>17 18      <p>19        This paragraph follows another paragraph.20      </p>21 22      <figure>23        <img src=”selectors.png” alt=”Diagram of CSS sibling selectors”>24        <figcaption>Adjacent and general sibling selectors depend on element order.</figcaption>25      </figure>26 27      <h2>Steps</h2>28 29      <ol class=”steps”>30        <li>Write the HTML.</li>31        <li class=”current”>Add the current class.</li>32        <li>Style later steps.</li>33        <li>Test the result.</li>34      </ol>35 36      <form class=”signup-form”>37        <label for=”email”>Email address</label>38        <input type=”email” id=”email” class=”has-error”>39        <p class=”error-message”>Please enter a valid email address.</p>40      </form>41    </article>42  </main>43 44</body>45</html>

CSS:

1/* First paragraph immediately after the main heading */2h1 + p {3  font-size: 1.2rem;4  font-weight: bold;5}6 7/* Paragraphs that immediately follow another paragraph */8p + p {9  margin-top: 1rem;10}11 12/* Captions immediately after images */13img + figcaption {14  font-size: 0.9rem;15  color: #555555;16}17 18/* Steps after the current step */19.current ~ li {20  color: #777777;21}22 23/* Error message immediately after an invalid field */24.has-error + .error-message {25  color: red;26  font-weight: bold;27}

This example shows several practical uses of sibling selectors.

How the Complete Example Works

This selector:

1h1 + p {2  font-size: 1.2rem;3}

selects only the paragraph that immediately follows the <h1>.

This selector:

1p + p {2  margin-top: 1rem;3}

selects paragraphs that immediately follow another paragraph.

This selector:

1img + figcaption {2  font-size: 0.9rem;3}

selects a caption immediately after an image.

This selector:

1.current ~ li {2  color: #777777;3}

selects later list items after the current item.

This selector:

1.has-error + .error-message {2  color: red;3}

selects an error message that immediately follows a field with class="has-error".

Common Mistake: Using + When the Elements Are Not Adjacent

HTML:

1<h2>Section Title</h2>2<img src=”image.jpg” alt=””>3<p>Intro paragraph.</p>

CSS:

1h2 + p {2  font-weight: bold;3}

This does not select the paragraph because the image is between the heading and paragraph.

Use ~ if the paragraph can appear later:

1h2 ~ p {2  font-weight: bold;3}

Or add a class to the paragraph if it has a specific role:

1.section-intro {2  font-weight: bold;3}

Common Mistake: Expecting Sibling Selectors to Work Across Different Parents

HTML:

1<section>2  <h2>Heading</h2>3</section>4 5<section>6  <p>Paragraph.</p>7</section>

CSS:

1h2 + p {2  color: navy;3}

This does not match.

The <h2> and <p> do not share the same parent.

Sibling selectors require sibling elements.

They cannot jump across separate parent elements.

Common Mistake: Expecting Sibling Selectors to Select Previous Elements

HTML:

1<p class=”intro”>Intro paragraph.</p>2<h2>Section Heading</h2>

CSS:

1h2 + p {2  color: navy;3}

This does not select the intro paragraph because it appears before the heading.

Sibling selectors only select later siblings.

They do not select earlier siblings.

Common Mistake: Confusing + and ~

This selector:

1h2 + p {2  color: navy;3}

selects only a paragraph immediately after an <h2>.

This selector:

1h2 ~ p {2  color: navy;3}

selects later paragraph siblings after an <h2>.

Use + for the next sibling.

Use ~ for later siblings.

Common Mistake: Relying on Sibling Selectors When HTML Order May Change

This selector depends on a specific order:

1input + label {2  margin-left: 0.5rem;3}

It works only when the label comes immediately after the input.

If the HTML changes to:

1<label for=”email”>Email address</label>2<input type=”email” id=”email”>

the selector no longer matches.

Use sibling selectors when the order is reliable.

Use classes when the element should be styled regardless of exact order.

Common Mistake: Using General Sibling Selectors Too Broadly

This selector can affect many elements:

1h2 ~ p {2  color: navy;3}

It selects every later paragraph sibling after an <h2>.

If the section has many paragraphs, all of them may be affected.

If you only want the first paragraph, use:

1h2 + p {2  color: navy;3}

If you want a specific paragraph role, use a class:

1.section-summary {2  color: navy;3}

Best Practices

Use + when you need the next immediate sibling.

Use ~ when you need later siblings that share the same parent.

Remember that sibling selectors only select elements that come after the first selector.

Remember that sibling selectors require the same parent.

Use adjacent sibling selectors for first paragraphs, captions, and nearby error messages.

Use general sibling selectors for later steps, later messages, and elements after a marker.

Use classes when the style should not depend on exact HTML order.

Avoid broad general sibling selectors unless the broad effect is intentional.

Use browser developer tools to check whether elements are truly siblings.

Keep selectors readable.

Summary

Adjacent and general sibling selectors style elements based on nearby sibling relationships.

The adjacent sibling selector uses +:

1h2 + p {2  font-weight: bold;3}

This selects a <p> element immediately after an <h2>.

The general sibling selector uses ~:

1h2 ~ p {2  color: navy;3}

This selects later <p> siblings after an <h2>.

The main difference is:

1+ = the next matching sibling only2~ = later matching siblings

Both selectors require the elements to share the same parent.

Both selectors only look forward.

They do not select previous siblings or parent elements.

Used carefully, sibling selectors help you write CSS that responds to the order and structure of your HTML without adding unnecessary classes.