Understanding specificity

Note: This article was written for Dreamweaver 8. However, the content in general is still valid for Dreamweaver CS5, even though screenshots may differ.

In this tutorial you will look at specificity. Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed. All rules in your style sheet carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.

Specificity is often the cause of problems for designers who don't yet have a firm understanding on how specificity works. If you have a particular CSS rule that looks as though it should be applying a set of styles to your web page in a certain way, but it isn't; then it is very likely that your "misbehaving rule" is being overridden by a more specific selector.

After you have completed this tutorial you will have gained the ability to use specificity to your advantage. You will also have discovered how to map CSS rules to specific elements within your web page. Specificity is a powerful tool.

The examples used in this tutorial are available through the download link below. You can reference them as you work along, or you can follow along and create the examples as you work through the tutorial.

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:

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:

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

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

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:

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:

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.

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.

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.

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:

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.

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.

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).

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.

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:

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.

Descendant selectors

Descendant selectors are the ideal way to create selectors that are specific. I'm sure you have picked up on that point while working through the four rules I discussed previously.

A type selector for p might look like this:

This rule would make all p elements in your XHTML document black. If you required that the p element in your sidebar needed to be red and the sidebar was constructed with an ID selector named #sidebar, then you could specifically target those p elements with a descendant selector:

The space between the #sidebar selector and the p element is known as a descendant combinator. The combinator instructs, "Look for an element with an id of sidebar and turn any p elements red." Descendant selectors can, (and often do) contain more than two reference points. If your p element contained a span and you wanted to make the span text green, then you would simply build on the previous selector:

For more information about descendant selectors , go to the Descendant Selector section on the W3C site.

Inline styles and specificity

Inline styles are the most specific types of CSS rules in CSS 2.1. An inline style lives within your XHTML document. It is attached directly to the element to be styled and uses the following syntax:

The specificity values for any inline style would be 1,0,0,0. As you can see, you now have a value in the left column that, as you have already learned, carries a greater specificity than the columns to its right.

If you add the inline style to your h1 element in the sample file example1.html, then you will no longer be able to change the color of the h1 element from within your style sheet. An inline style carries the greatest specificity and will override your external or embedded CSS rules every time.

The document tree

The basic structure of your XHTML file can be broken down into a document tree. The document tree consists of the base structure of your document and the elements that you have built into it. Dreamweaver provides you with a fast and efficient way to read your document tree.

Reading the Document Tree

Open the sample files example2.html and the example2.css and view example2.html in the Dreamweaver Design view. It should look like Figure 3.

Figure 4 shows the document tree for example2.html.

In Figure 4, you can see that the body element has two children: topcontainer and bottomcontainer. You can see these divs in your XHTML code. In turn, these two elements have children of their own, in this instance both have ol children that are being styled by the following rule, which can be found in example2.css:

To make the appearance of the two lists different, you can create a selector for one that is more specific than the previous rule. However, before you can do this, you need to know where the ol element you want to change exists within the document tree. You can do this by looking at example2.html in Design view.

To explore the document tree from Dreamweaver's design view and learn how to create selectors with greater specificity by using this information you can either watch the following movie or complete the following steps.

Watch the movie:

• View the movie: The Document Tree and Specificity

Follow these steps:

1. Open example2.html.
2. Open example2.css.
3. Place your cursor in the Chapter Two text in bottomcontainer.
4. Note how the tag selector shows a hierarchy of elements up to the body.

You can see from this information that a selector of #bottomcontainer ol maps to the ol element within the bottomcontainer element and you know that this is more specific than a simple element name selector. By using this information and the ability of Dreamweaver to write automatically the correct selector, you can very easily give your selectors greater levels of specificity.

The hierarchy displayed in Figure 5 shows you where your selected element exists within the document tree:

1. Select the ol element; it is highlighted in Design view.
2. Press Shift+F11 to open the CSS panel.
3. Click the New CSS Rule button. The New CSS Rule dialog box opens. The Advanced option button is selected. You can see in the Selector box Dreamweaver has built a descendant selector mapped to the ol element. Dreamweaver will always use the container to make your rule more specific. This helps to prevent conflicts within your style sheet.
4. Click the Cancel button.
5. Select the li element from the bottomcontainer div.
6. Click the New CSS Rule button. The New CSS Rule dialog box opens. The Advanced option button is selected. You can see in the Selector box Dreamweaver has built a descendant selector mapped to the li element.
7. Click the Cancel button.
8. Switch example2.html to Code view.
9. Highlight the code between the body tags.
10. Select the Insert Div button from the Layout tab. The Insert Div Tag dialog window opens. Insert should have Wrap around selection selected
11. Type wrapper into the ID text box.
12. Click OK.
13. Save your work.
14. Switch back to Design view.
15. Place your cursor within the Chapter Two text in the topcontainer div. Note that the wrapper div you added now shows in the Tag Selector (see Figure 6).

16. Select the ol element within the topcontainer div.
17. Press Shift+F11 to open the CSS panel.
18. Click the New CSS Rule button. The New CSS Rule dialog box opens. The Advanced option button is selected. You can see in the Selector box Dreamweaver has built a descendant selector mapped to the ol element, but this time it includes the #wrapper selector, giving the selector greater specificity.
19. Click OK. The CSS Rule Definition dialog box opens.
20. Select Type from the Category list.
21. Click the Color: color cube.
22. Select black.
23. Click OK.

Conclusion

Specificity is not as complex as it may seem, but it may a take a read or two to get the specifics. Once you have a grasp of specificity and the document tree, it will make your life so much easier—selectors become easier to write and conflicts easier to resolve.

Although this article by no means covers specificity in its entirety, it does give you a good foundation and the ability to go on and investigate further. You can find more information on specificity on the W3C site.

And, before I forget, here is the answer to the exercise in this tutorial:

Did you get that right? I'm willing to bet you did!