Dreamweaver Article

Understanding Specificity

The laws of specificity

You should be aware that the laws of specificity can change from version to version. I think at this point in time it would be fair to say that CSS 2.1 is generally the version that most designers aim for; so this tutorial will reference CSS 2.1.

Specificity is calculated using a formula that is based on the selector section of your CSS rule. The selector area is the section that comes before the opening brace, in the following example, the h1 section of the rule is the selector:

h1 {
color: #000000;
}

A selector can contain one or more reference points, the greater the specificity rating of these reference points the more specific your rule is.

The specifity hierarchy

Specificity is calculated in a hierarchy system. In CSS 2.1, this hierarchy is split into four distinct categories for the purpose of determining the specificity of any given rule (listed in descending order, with Inline Styles being the most specific category):

a. Inline Styles

b. IDs

c. Classes and pseudo-classes

d. Elements and pseudo-elements

The specificity of an h1 selector that contained only the element name would be calculated as follows:

h1 = (a=0), (b=0), (c=0), (d=1)

In reality this would be written as a comma-separated list:

h1 = 0,0,0,1 

If your selector referenced an id then the values would look like this:

#content h1 = 0,1,0,1

As the example above contains an id selector (#content), the second value becomes 1 to show that this selector contains 1 id reference point. The second example is more specific, because it contains an id reference point which carries more weight than a simple element name. It doesn't matter where this rule is placed in your style sheet; it will always win out against the simple h1 selector due to its greater specificity. The further to the left of the comma-separated list your reference points are, the more specific the reference point is.

Let's assume that in error you have written the same rule into your external style sheet twice. When placed next to each other, these two rules might look like the following:

h1 {color: blue;}
h1 {color: yellow;}

In this example, the specificity of both rules is 0,0,0,1 neither is more specific than the other. If these were the only two rules affecting h1 in your style sheet, then the h1 element would be given the yellow color; as the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific. If you switched the two rules so the color: blue; rule was on the bottom, then the h1 element would be shown in blue. When selectors have an equal specificity value, then the conflict will always be resolved in this manner.

The origin of style sheets

Styles sheets can originate from different places—you can link to them, you can embed them in the head of your document, and you can even have inline styles living right inside your XHTML document. Origin can, and does, affect specificity where conflicting rules exist. In the previous example, you saw how conflicting rules are resolved; the origin of your style sheet will also have a bearing on the final outcome of conflicting rules.

You might also have an embedded style sheet in the head of your web document similar to this one:

<style type="text/css">
h1 {color: red;}
</style>

If such an embedded style sheet existed, the specificity of the h1 selector would be 0,0,0,1, which is exactly the same as the specificity for the two rules in your linked style sheet. However, the embedded style sheet is closer to the element to be styled and would therefore win out and the h1 element would be red in color.

So far, you have seen how conflicting rules are resolved. Next, you will look at some working examples of specificity where conflicts are not involved. After you have completed that section, you will learn how you can read the document tree from within the Dreamweaver Design view and learn how to write CSS rules with specificity in mind using the CSS panel.

Page 2 of 6

Previous Page

Next Page