Specificity

Specificity determines which selector takes precedence over another. Let's look at the following code:

<h1 id="main_heading">Heading</h1>
h1 {
	background-color: green;
	color: pink;
}

#main_heading {
	color: yellow;
}

This code would be displayed as follows:

Heading

Why?

Because selectors have the following specificity:

  1. id
  2. class
  3. type
  4. universal selector

Therefore, the background color of the heading is green because it is not overridden by a more specific selector.

The color will be yellow because the id selector is more specific than the type selector h1.

Instructions

On line 10, we see an element h1 with the attribute id="title". In the file style.css, we see that the h1 element has the color blue. Create a selector for its id that sets the color to green.

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

8/12

Specificity | Start Coder