Advanced Web Construction - Head First HTML and CSS - page 437

What we need is a way to select descendants

What we're really missing is a way to tell CSS that we want to only select
elements that descend from certain elements, which is kinda like specifying that you
only want your inheritance to go to the children of one daughter or son. Here's
how you write a descendant selector.

Leave a space between
the parent name and
the descendant name.

html

body

Here's the
parent element.

h1 h2

div id="elixirs"

h2 h3 h3 h3

div h2 {
color: black;
}

This rul e says to sel ect
any <h2 > that is a
descend ant of a <d iv>.

Now the only problem with this rule is that if someone created another <div>
in the “lounge.html” file, she'd get black <h2> text, even if she didn't want it.
But we've got an id on the elixirs <div> , so let's use it to be more specific about
which descendants we want:

Now the parent
element is the
element with
the id elixirs.

html

body

h1 h2

div id="elixirs"

h2 h3 h3 h3

#elixirs h2 {
color: black;
}

This ru le says to se lect any <h2 > that is a
descen dant of an e lement with the id “elixi rs”.