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:
- id
- class
- type
- 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
8/12