Contextual selectors

There are several selectors that focus on target elements based on their relationship
with other elements in the document tree. The important thing
to remember about all of the relationship-based or combined selectors—
also sometimes called combinators—is that the target element is the final
element of the combinator. It is easy to get distracted by all of the selectors at
the beginning, but they are only there in reference to the element at the end.
Let’s take a look at the different combinations available.
Descendant
Descendant selectors select the element that is a descendant of another
element in the document tree.
<div id="sidebar">
<h2>Missing Jewels</h2>
</div>
Th e syntax is as follows:
ancestor selector (space) descendant selector {property: value;}
So to target the <h2> that is the descendant of the <div>, we would write this:
div h2 {color: green;}


Child
A child selector targets an element that is a child of another element.
Remember that a child is a direct descendant of an element in the document
tree (as opposed to a more distant descendant).
<p>Here is text that is <strong>forcefully</strong> emphasized.
➥ More text, but that is only normally <em>emphasized</em>.</p>
Here’s the syntax:
parent selector > descendant selector {property: value;}
So to target the <strong> element that is the child of the <p> element, we
would write this:
p > strong {font-family: Tahoma, sans-serif;}


Sibling/adjacent
A sibling selector (also known as adjacent) selects an element that is next
to another element in the document tree.
<div id="sectiontwo">
<h3>Priorities</h3>
<p>Things to accomplish today</p>
<ol>
<li>Interrogate suspects for the case of the Lost Content</li>
<li>Track clues for the case of the Notorious Em</li>
<li>Clean kitchen</li>
</ol>
</div>
Th i s i s t he syntax:
sibling selector + sibling selector {property: value;}
To target the <ol> element next to the <p> element (which are both
descendants and children of the <div> element), we would write this:
p + ol {font-family: Georgia, serif;}