Combinators
suggest changeOverview
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 order property, 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.