User Tools

Site Tools


css:combinators

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.

/* Paragraphs that come immediately after any image */
img + p {}

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.

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

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.

/* Paragraphs that are siblings of and subsequent to any image */
img ~ p {}
css/combinators.txt · Last modified: by linepup

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki