child & sibling selector notes

This is just a quick & dirty short version of ‘child & sibling selectors‘ post by Chris Coyer over on CSS-Tricks.

descendant selector

ul li { }

Affects all children (li elements) of the parent (ul) element.

child combinator

ul > li { }

Only affects the first-child (li) of the parent (ul) element.

adjacent sibling combinator

p + p { }
#header + h1
{ }

Affects an element (block level) that is directly after another specific element.

general sibling combinator

p ~ p { }
div ~ p { }

Affects all elements that appear after the first selector.


Leave a Reply