In the last exercise, instead of selecting all <h5> elements, you selected only the <h5> elements nested inside the .description elements. This CSS selector was more specific than writing only h5. Adding more than one tag, class, or ID to a CSS selector increases the specificity of the CSS selector.
For instance, consider the following CSS:
Both of these CSS rules define what a <p> element should look like. Since .main p has a class and a p type as its selector, only the <p> elements inside the .main element will appear red. This occurs despite there being another more general rule that states <p> elements should be blue.
Instructions
To show how specificity increases with additional selectors, let’s create another ruleset with the descendant combinator and then compare it to a ruleset without.
In style.css, write a ruleset using the descendant combinator to select the <h4> elements nested in the <li> elements. Inside of the curly braces, write:
Click Run and then scroll down the page to see the <h4> elements under “More Destinations” appear gold.
Now, create a ruleset targeting elements with just the h4 type, and add a declaration of:
Will the <h4> elements turn blue? Click “Run” to find out.
The elements stay gold because there is a more specific selector for <h4> elements you wrote in the last step. Because of the more specific CSS selector (li h4), the more general selector of h4 will not take hold.