A demonstration of combination
CSS selector combinators are used when you need to refer to elements via their relationship to other elements. Possible relationships are descendants, children and siblings.
Below you can see the combinator syntax as well as what they do. There are a couple more relevant pseudo-classes that I didn’t include.
#parent
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent div
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent > div
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent + div
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent ~ div
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent > div:first-child
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent > div:nth-child(3)
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent > div:nth-child(odd)
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
#parent div:not(.child)
Parent
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Child
Grandchild
Grandchild
Grandchild
Sibling
Sibling
Sibling
If you need to support really old versions of Internet Explorer you have to be careful. IE 6.0 or older does not support CSS 2.1 selectors while IE 8.0 or older does not support CSS3 selectors.