Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 18th of September 2014 11:42:31 PM

2.7. Specificity

Given the existence of inheritance, one might well wonder what happens in a circumstance such as this:

.grape {color: purple;}
H1 {color: red;}
<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>

Since the selectors H1 and .grape can both match the H1 element shown, which one wins? As it happens, .grape is the correct answer, and so the H1 element will be colored purple. This happens because of the specificity of the two rules, and the rules CSS has to deal with such situations.

Specificity describes the relative weights of various rules. According to the specification, a simple selector (e.g., H1) has a specificity of 1, class selectors have a specificity of 10, and ID selectors a specificity of 100. Thus the following rules would have the noted specificity:

H1 {color: red;}                    /* specificity = 1 */
P EM {color: purple;}               /* specificity = 2 */
.grape {color: purple;}             /* specificity = 10 */
P.bright {color: yellow;}           /* specificity = 11 */
P.bright EM.dark {color: brown;}    /* specificity = 22 */
#id216 {color: blue;}               /* specificity = 100 */

Thus, the rule for #id216 has a much higher specificity, and therefore more weight, than any of the others listed. In cases where more than one rule can apply to an element, the styles with the higher weight win out.

2.7.1. Inheritance and Specificity

Within the framework of specificity, inherited values have, effectively, a specificity of 0. This means that any explicitly declared rule will override an inherited style. Therefore, no matter how much weight a rule might have, it is only inherited if no other rule can be applied to the inheriting element.

For example, consider the following:

BODY {background: black;}
LI {color: gray;}
UL.vital {color: white;}

You would likely expect that all list items would be gray except for those which are found in lists with a class of I will take a break from my normal pragmatic approach to getting you (the programmer) started with using XML and Java and just talk about the high level (design level) benefits of this wonderful combination. A good design is important to a good implementation for any system.

XML is structured

When you create your data using an XML editor (that you can write), you can not only input the content of your data, but also define the structural relationships that exist inside your data. By allowing you to define your own tags and create the proper structural relationships in your information (with a DTD), you can use any XML parser to check the validity and integrity of the data stored in your XML documents. This makes it very easy to validate the structure and content of your information when you use XML. Without XML, you could also provide this validation feature at the expense of developing the code to this yourself. XML is a great time saver because most of the features that are available in XML are used by most programmers when working on most projects.

By using XML and Java, you can quickly create and use information that is properly structured and valid. By using (or creating) DTDs and storing your information in XML documents, you have a cross-platform and language independent data validation mechanism (for free) in all your projects!

You might use XML to define file formats to store information that is generated and used by your applications. This is another use of the structured nature of XML. The only limitation is that binary information can't be embedded in the body of XML documents. For example, if you wrote a word processor in Java, you might choose to save your word processor documents to an XML (actually your ApplicationML) file. If you use a DTD then your word processor would also get input file format validation as a feature for free. There are many other advantages to using XML and a file storage format for your applications which will be illustrated later in the chapter.

vital, in which case they'll be white. However, as Figure 2-26 demonstrates, this is not the case.

Figure 2-26

Figure 2-26. Apparently incorrect behavior

Why does this happen? Because the explicit declaration with the selector LI wins out over the value which might have been inherited from the UL.vital rule.

Let's look at this process in a little more detail. Given the following markup, the emphasized text will be gray, not black, since the rule for EM outweighs the value inherited from the H1:

H1#id3 {color: black;}   /* specificity = 101 */
EM {color: gray;}        /* specificity = 1 */
<H1 ID="id3">Meerkat <EM>Central</EM></H1>

This is because the specificity of the second rule (1) is higher than the specificity of the inherited value (0). The fact that the original specificity of the H1#id3 rule is 101 has no effect on the inherited value, whose weight is still 0.

If the intention is to have H1s be consistently black, while EM text in all other circumstances should be red, then the following would be a good solution:

H1, H1 EM {color: black;}   /* specificity = 1, 2 */
EM {color: red;}            /* specificity = 1 */

Given these rules, EM text in any circumstance except within an H1 will be red. However, EM text inside H1 elements will be black, because the specificity of their selector (2) is greater than that of the second rule (1). Note that since, due to selector grouping, there are effectively two rules in the first statement (one for H1 and one for H1 EM ), there are also two specificities -- one for each rule.

Elements with a STYLE attribute are defined under CSS1 to have a specificity of 100, just as though they were ID selectors such as #id3. In practice, however, this specificity value is somewhat higher, since the value of a STYLE element seems to outweigh most normal rules, even those which technically have a higher specificity (such as H1#id3 EM ). In other words, the following markup will generally have the result shown in Figure 2-27:

H1#id3 EM {color: gray;}
<H1 ID="id3">Meerkat <EM STYLE="color: black;">Central</EM>!</H1>
Figure 2-27

Figure 2-27. Inline styles have high specificity

You might choose to treat STYLE value as having a specificity value of, say, 1,000, although this interpretation is not supported by the CSS specification and so cannot be relied upon. Finally, pseudo-elements are ignored altogether when calculating specificity, but pseudo-classes are treated like regular classes.

There is one other wrinkle in the specificity picture, which is a way to pretty much override the entire specificity mechanism.

2.7.2. Importance

Ever felt like something is so important that it outweighs all other considerations? Well, it's possible to mark certain rules as being more important than others. These are called important rules due to the way in which they are declared and also because of their very nature. An important rule is marked by inserting the phrase !important just before the terminating semicolon in a rule:

P.dark {color: #333 !important; background: white;}

Here, the color value of #333 is marked !important, whereas the background value of white is not. If you wish to mark both rules as important, then each rule will need its own !important:

P.dark {color: #333 !important; background: white !important;}

It is important to ensure that you place the !important correctly, or else the rule can be invalidated. The !important always goes at the end of the declaration, right before the semicolon. This is especially important -- no pun intended -- when it comes to properties that allow values which contain multiple keywords, such as font:

P.light {color: yellow; font: 11pt Times !important;}

If the !important were placed anywhere else in the font declaration, then that entire declaration would very likely be invalidated and none of the styles applied.

Rules that are marked !important do not have a defined specificity value, but authors can assume that they have a conveniently high value, such as 10,000 -- in other words, a value that outweighs all others. Note that while author-defined styles are treated as having a greater weight than reader-defined styles (see Section 2.8, "The Cascade", later in this chapter), the reverse is true of !important rules: important reader-defined rules take precedence over author-defined styles, even those marked !important.

Indeed, an !important rule will override the contents of an inline STYLE attribute. Thus, given the following code, the result will be gray text, not black:

H1 {color: gray !important;}
<H1 STYLE="color: black;">Hi there!</H1>

There is one last scenario to consider. Consider the following:

P#warn {color: red ! important;}
EM {color: black;}
<P ID="warn">This text is red, but <EM>emphasized text is black.</EM></P>

Remember that inherited values always have a specificity of 0. This is true even if the rule from which the value comes has an !important attached. All of its importance is lost outside the elements which match that rule.


As of this writing, very few browsers implement !important. Internet Explorer 5 and Opera 3.6 have it right, but that's all. On the other hand, !important is expected to be supported in Navigator 6.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

side of the document. Instead of having to create a special imagewith a whole lot of blank space to the right of the image, we caninstead make a small change to our styles:

BODY {background-image: url(yinyang.gif);background-repeat: repeat-y;}

As Figure 6-29 demonstrates, the image is simplyrepeated along the y-axis (that is, vertically) from its startingposition -- in this case, the top left corner of the browserwindow.


The fictional LINE element actually clarifies the behavior that results from setting line-height on a block-level element. According to the CSS specification, declaring line-height on a block-level element sets a minimum line-box height for the content of that block-level element. Thus, declaring P.spacious {line-height: 24pt;} means that the minimum height for each line box is 24 points. Technically, the
where n=3 references the client browser's default fontsize, typically 12-point, so that the allowable  n values1 through 7 typically reference 8, 10, 12, 14, 18, 24 and 36 points respectively;"name" references a font name (Arial, Times New Roman or whatever);and "color" is an RGB hexadecimal triple or one of the 16 namedcolors. 

Then you can change font attributes for special pieces of text in-linewith FONT tags: 
<FONT SIZE="n" FACE="name" COLOR="color">... </FONT>type2, as shown in
Figure 6-8:

IMG.type1 {color: gray; border-style: solid;}IMG.type2 {border-color: gray; border-style: solid;}
Figure 6-8

Figure 6-8. Setting the border color for images

Border colors, and borders in general, are all discussed in muchgreater detail in the Chapter 7, "Boxes and Borders".