Learn

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:

p { color: blue; } .main p { color: red; }

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

1.

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:

color: gold;

Click Run and then scroll down the page to see the <h4> elements under “More Destinations” appear gold.

2.

Now, create a ruleset targeting elements with just the h4 type, and add a declaration of:

color: dodgerblue;

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?