====== CSS: Combinators ======

===== Adjacent Sibling =====

The adjacent sibling combinator ''(+)'' separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

<code css>
/* Paragraphs that come immediately after any image */
img + p {}
</code>

===== Child =====

The child combinator ''(>)'' is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

<code css>
/* List items that are children of the "my-things" list */
ul.my-things > li {}
</code>

===== General Sibling =====

The general sibling combinator ''(~)'' separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

<code css>
/* Paragraphs that are siblings of and subsequent to any image */
img ~ p {}
</code>