# Combinators

• Quick Reference
• Child combinator (>)
• Adjacent sibling combinator (+)
• General sibling combinator (~)
• Other Combinators
  • Exclude first:child

# Quick Reference

Combinator Name	Symbol	Description	Example
Child	>	Selects direct children	div > p
Adjacent sibling	+	Selects immediate siblings	div + p
General sibling	~	Selects all siblings	div ~ p

# Child combinator (>)

The child combinator (>) is used to select elements that are direct children of a specified element.

div > * { } /* Select any element where the parent is a <div> element */
div > p { } /* Selects all <p> elements where the parent is a <div> element */

# Adjacent sibling combinator (+)

The adjacent sibling combinator (+) is used to select elements that are placed immediately after (not inside) the first specified element.

div + p { } /* Selects all <p> elements that are placed immediately after <div> elements */

Adjacent is directly after,

<div>...</div>
<p> Pick me! </p>

Not nested.

<!-- not adjacent -->
<div>
    <p> Not me, I'm nested!</p>
</div>

# General sibling combinator (~)

The general sibling combinator (~) is similar to the adjacent sibling combinator. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it.

div ~ p { } /* Selects all <p> elements that follow <div> elements */

<div>...</div>
<p> Pick me! </p>
<section>...</section>
<p> Pick me! </p>

# Other Combinators

# Exclude first:child

This selector is good for adding properties such as border-top or margin-top as the property does not apply to the first-child

.not-first-child > :not([hidden]) ~ :not([hidden]) { }