Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

CSS Next-Sibling Combinator (+) Selector

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The Next-Sibling Combinator (+) selector is used in CSS to target an element that immediately follows another specific element, sharing the same parent. Unlike the descendant selector, which can target any nested elements regardless of their position, the + combinator only applies to the very next sibling. This allows developers to style elements based on their immediate relationship in the document structure, giving precise control over adjacent elements.

For example, if you want to style a p element that comes immediately after an h2 heading, you could use the + combinator to ensure that only the first p after each h2 receives the styles, leaving other p elements unaffected. This makes it particularly useful for creating context-sensitive designs, like spacing, borders, or highlighting content that directly follows headings or other key elements.

The Next-Sibling Combinator (+) can be combined with any selector type, such as class selectors, ID selectors, or element selectors. For instance, targeting a specific class that immediately follows another element allows fine-tuned styling: you might add a special margin, padding, or a color change only to adjacent elements, avoiding unintended styling of other elements of the same type.

A practical example would be styling a warning message that comes right after a label:

label + .warning {
  color: red;
  font-weight: bold;
}

In this snippet, only the element with the class warning that immediately follows a label will be styled in red and bold. Any other .warning elements elsewhere in the document remain unaffected.

This selector is essential for creating clean, semantic CSS that responds to document structure, rather than relying solely on additional classes or IDs, keeping your stylesheets more maintainable and readable.

Syntax

element + element { css declarations; }

Example

<div class="container">
<h2>Main Topic</h2>
<p>This is the direct next sibling. It will be styled!</p>

<p>This is a sibling, but not the "next" one. It stays normal.</p>

<h2>Another Topic</h2>
<p>This paragraph also follows an h2 directly, so it gets styled too.</p>
</div>
/* This targets any <p> that comes immediately after an <h2> */
h2 + p {
font-weight: bold;
color: #2e7d32;
font-size: 1.2rem;
margin-top: 0;
}

Browser Support

The following information will show you the current browser support for the CSS Next-Sibling Combinator (+) selector. Hover over a browser icon to see the version that first introduced support for this selector.

This CSS next-sibling combinator (+) selector is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 2nd January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!