Computer and Business Skills training

Sign Up
Home / Resources / Web Development / HTML / Specificity

Being Specific. CSS Specificity Demystified!

What is CSS Specificity? Specificity in CSS is the way a browser will determine which declarations are applied to HTML elements when there is a conflict from multiple rules. Ok, so what does that mean exactly? Let's look at an example:

Here we have an <h1> tag that has a class of 'highlight':

<h1 class="highlight">

We have two rules in our CSS styles that effect this tag:

.highlight {
color: white;
background: blue;
h1 {
color: white;
background: black;

Both rules have the font color white declaration but they have different background colors. Which background color does the browser choose? This may seem obvious. If you said the tag will have a blue background you would be correct. All tags that have the class 'highlight' would be in blue, the <h1> tags without the class would have a black background. Let's look at another example:

Now we have a <p> tag with an id and a class:

<p id="first" class="special">

And our style sheet:

p#first {
font-family: Arial, sans-serif;
font-size: 16px;
p.special {
font-family: Arial, sans-serif;
font-size: 20px;

Once again, what will the paragraph's font size be? Both rules are valid, the paragraph has both the id of 'first' and the class of 'special' but since it can't be both font sizes which does the browser choose? In this case the font size will be 16px because the id of 'first' is more specific than the class of 'special'. Think about it, many elements on the page may have the class of 'special' but only one element can have the id of 'first'. Therefore, because the id is pointing to a very specific case where the class if more general, the id wins. Also notice, in both cases order of the rules in the style sheet did not matter. Order of the rules is handled by the cascade (hence the name Cascading Style Sheets) and is only relevant when the specificity of both rules are equal. More on that later.

Let's try another one:

Here is our HTML:

<div id="header">
<p class="special">

And our CSS:

p.special {
color: red;
font-size: 16px;
#header p {
font-family: Arial, sans-serif;
font-size: 18px;

First, let's make sure we understand these rules. The first rule is selecting a <p> tag with the class of 'special'. The second rule is selecting a <p> tag that is a child of (or nested in) a tag with the id of 'header'. Either rule could apply to the same paragraph in our example. So how is this particular paragraph going to be formatted? In this case it will be red, Arial, 18px. Did you see what happened there? The browser took the font color of red from the first rule and the font type of Arial from the second rule, effectively combining them. Those properties where not in conflict between the two rules. The browser only has to make the decision on which font size to choose because that is the conflicting property. By the way, this is one example of how the cascade works, combining properties from different rules.

In our example above the '#header p' rule won on font size because it is more specific of the two. Again, think about it, the rule 'p.special' could apply to multiple paragraphs that have the class of 'special' no matter where they exist on the page, but the '#header p' rule only applies to paragraphs that are inside the <div id="header"> tag, and that can only be in one place on the page. Remember, IDs can only be used once per page, classes can be used multiple times in different elements.

If you got that one, good for you, but some of us are still scratching our heads and asking, "How can you know for sure which rule is more specific?".

Here is a good formula to help you determine just that. Look at all the selectors in the rule and give them a value based on a point system:

IDs = 100
Classes = 10
Tags = 1

Add those values up and you get a Specificity Value for the rule. Whichever rule has the higher value wins. And, you treat each type of selector separately even if they are attached. For example, the selector of 'div#header' would have a value of 101, 1 for the tag selector of 'div' and 100 for the id selector of '#header', even though it is only referring to one tag. Let's look at some for more examples:

#header = 100
.special = 10
div = 1
div.special = 11 (remember, treat each selector separately)
div p.special = 12
div#header.special = 111
div p.special = 12
#header p.special = 112
#content blockquote.special p.first = 122

Did you follow that last one? Here is the HTML it might apply to:

<div id="header">
<blockquote class="special">
<p class="first">

The rule was referring to the <p> tag with a class of 'first', inside of the <blockquote> with the class of 'special', inside of the <div> with the id of 'header'. See how very specific that rule was?

Using the Specificity Value Formula will always answer that question of which rule is more specific and, this is the actual formula the browser uses. You can use this knowledge of specificity to create different rules that play well together, by allowing you to understand how the browser evaluates which declarations apply when there is a conflict.

Now, what if the two rules have the same specificity value?

<p class="special first">

p.special {
font-size: 12px;
p.first {
font-size: 14px;
[Note: tags can have more that one class or id by separating them with spaces in the class value]

Same value, correct? Add them up, both have a value of 11. So in our example above which rule wins? In this case the cascade takes over and the second rule wins so the paragraph will have the font size of 14px. Whenever the specificity value is the same, order does matter, the rule listed last wins. Cascade also applies to embedded style sheets and inline styles. The way the browser sees it, the closest rule to the HTML tag wins. So, if you had rules that apply to the same tag and the same specificity, one in the attached style sheet, and one in the embedded style sheet, and then one as an inline style, the inline style is closest so it wins. If you aren't familiar with the different places you can add style to your web pages, see my article, "Connecting to Style".

As you can see, understanding how the browser handles conflicts in style declarations through specificity and the cascade will be helpful for not only troubleshooting our rules but will allow us to create more complex styles.

Related HTML/CSS Lessons

Connecting CSS to HTML
CSS Heredity

Onsite HTML/CSS training

Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quote for onsite HTML and CSS training.

To view a sample of our past students testimonials, please click on the following link: HTML/CSS student testimonials.

Why train with us?Need Group training quotation?Fresh Peet's Coffee brewed every dayFREE Class Repeat with each course