CSS: adjacent sibling selector (+)

By Xah Lee. Date: . Last updated: .

Next-Sibling Combinator

s1 + s2

Match s2 that immediately comes after s1.

(s2 has immediate older brother s1)

Each expression can be compound selector.

/* match the b tag that comes immediately after span */
span + b {
 color: red;
}
<div>
 <span>abc</span>
 <b>match</b>
</div>

Example. First paragraph after header

h1 + p {
 color: red;
}

Example. Styling forms

label + input {
 display: block;
 margin-bottom: 15px;
 padding: 8px;
}
<form>
 <label for="name">Name</label>
 <input type="text" id="name">

 <label for="email">Email</label>
 <input type="email" id="email">
</form>

CSS selectors by sibling criteria

CSS. Selectors

Selector types
Simple selectors
Combinators
Selector list
Special selector
Misc