CSS: adjacent sibling selector (+)
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
- CSS: types of selectors
- CSS: simple selectors
- CSS: compound selectors
- CSS: complex selector (combinator)
Simple selectors
- CSS: type selector (tag name)
- CSS: universal selector (* any tag)
- CSS: class selector (.x)
- CSS: ID selector (#)
- CSS: attribute selector ([x])
Combinators
- CSS: descendant selector (space)
- CSS: child selector (>)
- CSS: adjacent sibling selector (+)
- CSS: subsequent sibling selector (~)
Selector list
Special selector
- CSS: :root selector
- CSS: no child selector
- CSS: first child, sibling rank selector
- CSS: nth-child selector
- CSS: pseudo-class selector (:)
- CSS: pseudo-element selector (::)
- CSS: negation selector (:not)
- CSS: βis any ofβ selector (:is, :where)
- CSS: :has descendant selector