CSS Selectors : Chaining and specificity

SELECTORS

Chaining and Specificity

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.

Hint:

Since the h4 is nested in the li, it would be the second selector in the descendant combinator.

parent-selector descendant-selector {
  declaration
}

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.

Hint:

Selecting an element by type is done with the opening tag name (in this case <h4>) without the angle brackets.