1. Technology

CSS Specificity

How Competing Cascading Style Sheet Rules are Applied

By

Specificity may seem like a very jargon-heavy term, but all it really refers to are the rules behind why a browser would choose one style over another when displaying an element. While this won't generally happen in simple Web sites, the more complicated your site gets the more that you'll have conflicts betweeen your style properties. So if you know why one style is showing up where it shouldn't and not showing up where it should, you'll save yourself a lot of headaches.

With CSS Specificity, Order Matters

The first thing you need to understand is that the order in which styles are read by the browser matters. If you had a case of two style properties affecting the exact same selector, the last property to be read would be the one that would apply. In this example, all paragraphs would be yellow:

p { color: blue; }
 p { color: yellow; }

The same is true whether the styles are in the same style sheet, or in different external style sheets. The style that is read last would be the one that is applied. If you are getting styles from different locations, the order of the styles is important. Consider the following Web page fragment:

...
 <head>
 <link href="stylesheet1.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
 @import URL ("stylesheet3.css");
 p { color: blue; }
 </style>
 <link href="stylesheet2.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <p style="color: yellow;">first paragraph</p>
 ...

The styles and style sheets are imported in the following order by the Web browser:

  1. stylesheet1.css
  2. stylesheet3.css
  3. p { color: blue; }
  4. stylesheet2.css
  5. <p style="color: yellow;">

The fifth style is the most specific, and so it would be applied, even if there are other styles in the other style sheets that could also apply (such as number 3).

Then CSS Specificity Gets Complicated

Order is not the only thing that defines how a style gets applied. The more specific your style is defined the more likely it will be applied. To assign specificity to a style, you need to know the following rules:

  1. Count the number of element names in the selector.
  2. Count the number of pseudo-classes and other non-ID attributes in the selector, and multiply by 10.
  3. Count the number of ID attributes in the selector, and multiply by 100.
  4. Add up all three numbers, and that is that property's specificity.

The higher the specificity number, the more likely it will be applied, regardless of where it appears in the order of the CSS style sheets.

CSS Specificity Examples

First count the element names. This can be either HTML elements or XML elements. For ease of distinguishing them, I will write them in all-caps.

* { ... } = 0
 P { ... } = 1
 DIV P { ... } = 2
 H3 + P { ... } = 2

Count classes, pseudo-classes and non-ID attributes and multiply by 10.

.top { ... } = 10
 P.top { ... } = 11
 a:link { ... } = 11
 a.new:link { ... } = 21
 H3.bottom + p.top { ... } = 22
 DIV + *[title] { ... } = 11

IDs are the most specific, so count them and multiply by 100.

#a1 { ... } = 100
 #a1.red { ... } = 110
 H3#a1.red { ... } = 111
 blockquote #a2 { ... } = 101

Make CSS Specificity Work For You

If you're sticking to very simple CSS documents, you may think that specificity really doesn't matter. But the larger your CSS style sheets get, the more conflicts you're going to have. Once you can determine your property's specificity, you will know if it will be applied. And with CSS comments you can even write the specificity right in your document.

©2014 About.com. All rights reserved.