Head First HTML with CSS

more on selecting children
Sharpen your pencil
h1
454 Chapter 11
Your turn. Write the selector that selects only elements inside the elixirs .
In your rule, set the color property to #d12c47. Also label the elements in the graph
below that are selected.
html
body
h2
Q: Descendant usually means child,
grandchild, great-grandchild. Here, we’re
just selecting the child descendants,
right?
A: That’s a really good point.
The selector “#elixirs h2” means ANY
descendant of elixirs, so the could be
a direct child of the or nested down
inside a or another nested
(making it a grandchild) and so on.
So a descendant selector selects any
nested inside an element, no matter how
deeply it is nested.
h2
div id=”elixirs”
h3
h3
h3
there are no
Dumb Questions
Q: Well, is there a way to select a
direct child?
A: Yes. For example, you could use
“#elixirs > h2”, to select only if it is
the direct child of an element with an id of
“elixirs”.
Q: What if I need something more
complex, like an that is the child of
a that is in elixirs?
div id=”calendar”
h1
h2 h3
A: It works the same way. Just use
more descendants, like this:
#elixirs blockquote h2 {
color: blue;
}
This selects any elements that
descend from s that descend
from an element with an id of “elixirs”.