Example
Overview
| Selector | Description |
|---|---|
div span | Descendant selector (all <span>s that are descendants of a <div>) |
div > span | Child selector (all <span>s that are a direct child of a <div>) |
a ~ span | General Sibling selector (all <span>s that are siblings after an <a>) |
a + span | Adjacent Sibling selector (all <span>s that are immediately after an <a>) |
Note: Sibling selectors target elements that come after them in the source document. CSS, by its nature (it cascades), cannot target previous or parent elements. However, using the flex
orderproperty, a previous sibling selector can be simulated on visual media.
Descendant Combinator: selector selector
A descendant combinator, represented by at least one space character (), selects elements that are a descendant of the defined element. This combinator selects all descendants of the element (from child elements on down).
div p {
color:red;
}
<div>
<p>My text is red</p>
<section>
<p>My text is red</p>
</section>
</div>
<p>My text is not red</p>
In the above example, the first two <p> elements are selected since they are both descendants of the <div>.
Child Combinator: selector > selector
The child (>) combinator is used to select elements that are children, or direct descendants, of the specified element.
div > p {
color:red;
}
<div>
<p>My text is red</p>
<section>
<p>My text is not red</p>
</section>
</div>
The above CSS selects only the first <p> element, as it is the only paragraph directly descended from a <div>.
The second <p> element is not selected because it is not a direct child of the <div>.
Adjacent Sibling Combinator: selector + selector
The adjacent sibling (+) combinator selects a sibling element that immediate follows a specified element.
p + p {
color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>
The above example selects only those <p> elements which are directly preceded by another <p> element.
General Sibling Combinator: selector ~ selector
The general sibling (~) combinator selects all siblings that follow the specified element.
p ~ p {
color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>
The above example selects all <p> elements that are preceded by another <p> element, whether or not they are immediately adjacent.
