HTML and CSS Reference
In-Depth Information
Your turn. Write the selector that selects only <h3> elements inside the elixirs <div>.
In your rule, set the color property to #d12c47. Also label the elements in the graph
below that are selected.
html
body
h1
h2
div id="elixirs"
div id="calendar"
h2
h3
h3
h3
h1
h2
h3
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 <h2> could be a direct child of
the <div> or nested down inside a <blockquote> or another nested
<div> (making it a grandchild) and so on. So a descendant selector
selects any <h2> nested inside an element, no matter how deeply it
is nested.
Q:
Well, is there a way to select a direct child?
A:
Yes. For example, you could use “#elixirs > h2” to select <h2>
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 <h2> that
is the child of a <blockquote> that is in elixirs?
A:
It works the same way. Just use more descendants, like this:
#elixirs blockquote h2 {
color: blue;
}
This selects any <h2> elements that descend from <blockquote>s
that descend from an element with an id of “elixirs”.
