CSS: adjacent sibling selector (+)

By Xah Lee. Date: . Last updated: .

Next-Sibling Combinator

tag1 + tag2

match element x if:

  • tag2 matches x.
  • tag1 matches a element that is a sibling of x, and it comes immediately before x.

tag can be a simple selector or 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>