Specificity (the cascade)S2C Home « Specificity (the cascade)
Well as promised in earlier tutorials we finally get to learn about Specificity and the cascade. In this lesson we look into specificity, find out how and when it selects styles. We also investigate why, when we create a style, the style seems to be ignored because of the specificity.
So What Exactly Is Specificity
When we have different styles for the same tag, what happens? How does the browser know which style to select from those available? Web browsers assign values to selectors dependant on what type of selector is being used, this is where we get the term specificity from. The style with the highest specificity, is the one the browser will use for styling.
Specificity Values
A specificity value is assigned to a style dependant upon the selector being used for that style as follows:
- Tag Selectors have a value of 1.
- Pseudo Elements have a value of 1.
- Class Selectors have a value of 10.
- Pseudo Classes have a value of 10.
- ID Selectors have a value of 100.
- Inline styles have a value of 1000.
The following table lists some examples of specificity values and their totals.
| CSS Selector | tag | class | id | total specificity |
|---|---|---|---|---|
| body | 1 | 0 | 0 | 1 |
| p em | 2 | 0 | 0 | 2 |
| p:first-letter | 2 | 0 | 0 | 2 |
| .aclass | 0 | 10 | 0 | 10 |
| p.aclass | 1 | 10 | 0 | 11 |
| #wrapper | 0 | 0 | 100 | 100 |
| #wrapper div | 1 | 0 | 100 | 101 |
| #wrapper div.aclass | 1 | 10 | 100 | 111 |
| #wrapper #sidebar | 0 | 0 | 200 | 200 |
| #wrapper #sidebar .aclass | 0 | 10 | 200 | 210 |
So by doing some simple maths we can work out which style will win. In the case where there are conflicting styles which have the same specificity, the last style wins.
Viewing Specificity
Lets take a look at specificity in action, to really get to our heads around this subject.
Open up the file with Notepad we created and tested in Lesson 5: Style Inheritance.
You saved the file to your computer in the C:\_CSSIntermediate folder as lesson_5_csspage.html
Copy and paste the following code into the reopened file, overwriting the existing text.
<!DOCTYPE html>
<!-- Our HTML/CSS for Specificity follows -->
<html lang="en">
<head>
<title>Intermediate CSS - Lesson 6 - Specifiy and the Cascade</title>
<style type="text/css">
/* 1 Tag Selector - Specificity of 1 */
body {
background-color: orange;
font: 1em Courier, sans-serif;
}
/* 1 Tag Selector - Specificity of 1 */
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
background-color: white;
}
/* 2 Tag Selectors - Specificity of 2 */
div p {
background-color: fuchsia;
}
/* 2 Tag Selectors - Specificity of 2 */
body p {
background-color: yellow;
}
/* 1 Tag Selector and 1 Class Selector - Specificity of 11 */
div .para1 {
background-color: green;
}
/* 1 Class Selector - Specificity of 10 */
.para1 {
background-color: teal;
}
/* 1 ID Selector - Specificity of 100 */
#para2 {
color: white;
background-color: red;
}
/* 1 Tag selector and 1 ID Selector - Specificity of 101 */
#div1 p {
color: white;
background-color: blue;
}
/* 1 Class selector - Specificity of 10 */
.start {
color: black;
background-color: teal;
font: 1.2em Courier, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Intermediate Lesson 6 - Specificity</h1>
<div>
<h2>A Division With Some Paragraphs</h2>
<p>Some paragraph text here.</p>
<p class="para1">A paragraph with a class attribute within a div.</p>
<p id="para2">A paragraph with an id attribute within a div.</p>
<p>Some paragraph text here.</p>
</div>
<div id="div1">
<h2>A Division Using An id Attribute</h2>
<p class="start">We want this paragraph to have large black text on
a teal background so the introduction stands out.</p>
<p style="background-color:black;color:white">Inline styles always win on specificity.</p>
<p>Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
</p>
</div>
</body>
</html>
Save the file in the C:\_CSSIntermediate folder as lesson_6_csspage.html and close the Notepad.
Viewing Our Saved File
From the C:\_CSSIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.
Reviewing The Code
Ok, lets take the styles we created one at a time and see their impact on our HTML. We created a body style with a background colour of orange and a Courier font with a size of 1em. As body is the daddy of all tags this style will cascade thoughout our webpage unless we specifically change it within other styles.
We then set up a div style with margins, padding and a border and a background colour of white. This style will be used by all <div> tags unless we use a more specific selector such as class or id within a <div> tag.
The next two styles div p and body p set up a background colour for paragraphs. Did you notice that we get a yellow background instead of a fuchsia one? Remember, when two styles for a selector have the same specificity, the style that appears last in our stylesheets wins. In this case the div p style is overwritten by the body p style.
After this we have 2 paragraph styles div .para1 and .para1 that use different backgrounds. Even though the .para1 style comes after, the div .para1 style wins as it has a higher total specificity. The #para2 style has no competitors so is written out as styled.
We then set up a paragraph style #div1 p for the div with the id attribute div1 and another paragraph style .start for the opening paragraph of this division. As you can see from the screenprint, the background colour and text colour for this paragraph have been styled using the #div1 p style instead. This is because the #div1 p style has a specificity of 101 whereas the .start paragraph only has a specificity of 10. A point to note here is that the new font settings for .start have been used. This is because this style has a specificity of 10 which overwrites the font setting we set in the body style which has a specificity of 1.
Lastly we used an inline style for a paragraph and with a specificity of 1000 this is always gonna win the specificity race.
Lesson 5 Complete
Set the .start style to #div1 .start which will then give this style the right specificity to be used. Try setting up a new style for the <div> tag that has an id attibute of div1 and see the effects. Add or remove some selectors from the code and examine the results
Related Tutorials
CSS Intermediate Tutorials- Lesson 5 - Style Inheritance
What's Next?
In the next tutorial we look at positioning our elements exactly where we want them.
Homepage
Top