| 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". |
No comments:
Post a Comment