Section 11.17. What we need is a way to select descendants

11.17. 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. divHere's the parent element. h2Leave a space between the parent name and the descendant name.And here's its descendant.{ color:This rule says to select any <h2> that is a descendant of a <div>.black;Write the rest of your rule just like you always do. } html body h1 h2 div id="elixirs" h2 h3Here's what this rule selects in the lounge. h3 h3 Now the only problem with this rule is that if someone created another <div> in the "lounge.html" file, they'd get black <h2> text, even if they 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: #elixirsNow the parent element is the element with the id elixirs.h2And here's its descendant.{ color:This rule says to select any <h2> that is a descendant of an element with the id "elixirs".black; } html body h1 h2 div id="elixirs" h2This rule selects the same element. But it's more specific, so if we added another <div> with an <h2> to the page, that's okay because this rule selects only <h2>s in the elixirs <div>. h3 h3 h3 Sharpen your pencil 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