In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements, also known as descendants. For instance, consider the following HTML:
The nested <li> elements are descendants of the <ul> element and can be selected with the descendant combinator like so:
In the example above, .main-list selects the element with the.main-list class (the <ul> element). The descendant <li>‘s are selected by adding li to the selector, separated by a space. This results in .main-list li as the final selector.
Selecting elements in this way can make our selectors even more specific by making sure they appear in the context we expect.
Instructions
In index.html, each destination has a paragraph with a description class below it. Nested within each description paragraph, is an <h5> element with the text “Top Attractions”. They’re a little hard to read since they turned yellow. Let’s fix that!
Navigate to style.css. Add a ruleset that uses the descendant combinator to target only the <h5> descendants of elements with the class .description.
Inside the curly braces of the selector, add a declaration of: