Dreamweaver Article

Understanding Specificity

Using specificity to your advantage

Table 1 shows four variations of an h1 selector. More specifically, it shows how you can affect the same h1 element by manipulating the specificity of your CSS rule; example number 4 is the most specific and example number 1 is the least specific. You can find the complete rules in the example1.css file (located in the CssFiles folder), which is part of the sample files that accompany this tutorial.

Table 1. Calculating specificity

A rule becomes more specific as the values in the ID, Classes and Pseudo-classes, and Element Names columns increase (you will learn more on inline styles below). A single point is awarded to each column for the number of times a type of selector appears in the make-up of your CSS rule.

If you had a fifth rule with selector reference points of #wrapper #content h1, then its specificity values would be 0,2,0,1. The fact that you have two id selectors referenced in this rule makes it more specific than rule 4 which only has 1 id selector referenced.

Time to look at some practical examples. The following snippet shows the XHTML you will use in the following examples; you can also find this in the example1.html file which is part of the sample files that accompany this tutorial.

<div id="container">
<h1 class="blue">I'm an h1 title</h1>
</div>

Example 1: h1

In the following, you are declaring h1 as the selector. At this stage, this will be the only rule in your style sheet. The specificity value of h1 is: 0,0,0,1. You can see these values in Table 1 by reading across the Example 1 row. At present this is the only reference to h1 in your style sheet, therefore this is the most specific rule and the values it contains will be applied to the h1 element in your XHTML document.

h1 {
font-size: 110%;
color: #000000;
}

Example 2: div h1

You can now add rule number 2 to your style sheet. Rule number 2 contains two element names; this gives this rule a specificity value of 0,0,0,2. You can see from this that rule number 2 is more specific than rule number 1, while the first three columns still have 0 values; you now have an extra element name in the selector which is the reference to the div:

div h1 {
font-size: 110%;
color: #66FF00;
}

Example 3: div h1.blue

Rule number 3 uses the blue class that is already referenced in the XHTML document. .blue is a selector in its own right; it is a class selector and carries greater specificity than the element names you have used so far. The specificity value of rule 3 is 0,0,1,2. This rule is more specific than either rule number 1 or rule number 2.

div h1.blue {
font-size: 110%; 
color: #0033CC;
}

Example 4: #content h1

Rule number 4 references only two points in its selector, the #content selector, which is an id selector (the # character declares it as such) and the h1 element name. At first glance you might think this rule is less specific than rule number 3, as it has fewer reference points. However, this assumption would be incorrect. The id selector carries a greater specificity than any of the reference points in rule 3, it is therefore deemed to be more specific. The specificity value for rule number 4 is 0,1,0,1.

#container h1 {
font-size: 110%;
color: #FF0000;
}

Looking at these four example rules, you can see how specificity is gauged; the more specific the references are in your selector the greater the specificity for the rule.

Working with the sample files

Open the files example1.html and example1.css in Dreamweaver, if you haven't done so already. Before making any changes preview your page in your browser of choice and note that the h1 content is black in color (see Figure 1).

Figure 1. The h1 is black

Next, uncomment the rules in the example1.css file by removing the opening /* and ending */ comment markers from around the rules that are commented out. After you have uncommented these rules, preview example1.html in your browser of choice again—the h1 content is now shown in red.

Figure 2. The h1 element is red

You will find rule number 4 is the last rule in example1.css. Move it so that it becomes the first rule in your style sheet and then preview example1.html in your browser of choice. You will see that the styles for rule number 4 are still applied to your document regardless of its position within your style sheet. This will be the case wherever rule number 4 appears in your style sheet; it will always win out against the other rules as it is the most specific.

Try commenting out only rule 4 in your example1.css file and see how the next most specific rule, div h1.blue, performs in the same way as rule number 4 had previously done.

Exercise

To see if you have a grasp on specificity, create a new rule in your style sheet referencing only the following XHTML structure (this code can be found in example1.html:

<div id="container">
<h1 class="blue">I'm an h1 title</h1>
</div>

See if you can turn the text in the h1 element blue without altering the XHTML in example1.html. You will find an example of how you could write this rule at the end of this tutorial (no cheating, please).

Remember, if you correctly make your new CSS rule more specific than the existing rules in the style sheet, then its position within the style sheet will have no bearing on its ability to make the text blue.

Page 3 of 6

Previous Page

Next Page