Section 5.2. Specificity: Which Style Wins | Dreamweaver CS3: The Missing Manual

5.2. Specificity: Which Style Wins

The previous example is pretty straightforward. But what if the three styles listed in Section 5.1.4 each had a different font specified for the font-family property? Which of the three fonts would a Web browser pay attention to?

As you know if you've been reading carefully so far, the cascade provides a set of rules that helps a Web browser sort out any property conflicts; namely, properties from the most specific style win . But as with the styles listed in Section 5.1.4, sometimes it's not clear which style is most specific. Thankfully, CSS provides a formula for determining a style's specificity that's based on a value assigned to the style's selectora tag selector, class selector, ID selector, and so on. Here's how the system works:

A tag selector is worth 1 point .
A class selector is worth 10 points .
An ID selector is worth 100 points .
An inline style (Section 2.5.1) is worth 1000 points .

The bigger the number, the greater the specificity. So say you create the following three styles:

a tag style for the <img> tag ( specificity = 1)
a class style named .highlight (specificity = 10)
an ID style named #logo (specificity = 100)

Then, say your Web page has this HTML: <img id="logo" class="highlight" src="logo.gif" /> . If you define the same propertysuch as the border propertyin all three styles, then the value from the ID style ( #logo ) always wins out.

Note: A pseudo-element (like :first-child for example) is treated like a tag selector and is worth 1 point. A pseudo-class ( :link , for example) is treated like a class and is worth 10 points. (See Section 3.1 for the deal on these pseudo-things.)

Since descendent selectors are composed of several selectors #content p ,or h2 strong , for examplethe math gets a bit more complicated. The specificity of a descendent selector is the total value of all of the selectors listed (see Figure 5-3).

Figure 5-3. When more than one style applies to a tag, a Web browser must determine which style should "win out" in case style properties conflicts. In CSS, a style's importance is known as specificity and is determined by the type of selectors used when creating the style. Each type of selector has a different value, and when multiple selector types appear in one stylefor example the descendent selector #banner pthe values of all the selectors used are added up.

Note: Inherited properties don't have any specificity. So even if a tag inherits properties from a style with a large specificitylike #bannerthose properties will always be overridden by a style that directly applies to the tag.

5.2.1. The Tiebreaker: Last Style Wins

It's possible for two styles with conflicting properties to have the same specificity. ("Oh brother, when will it end?" Soon, comrade, soon. The tutorial's coming up.) A specificity tie can occur when you have the same selector defined in two locations. You may have a <p> tag selector defined in an internal style sheet and an external style sheet. Or two different styles may simply have equal specificity values. In case of a tie, the style appearing last in the style sheet wins.

Here's a tricky example using the following HTML:

 <p class="byline">Written by <a class="email" href="   mailto:jean@cosmofarmer.com   ">Jean Graine de Pomme</a></p>

In the style sheet for the page containing the above paragraph and link, you have two styles:

 p a.email { color: blue; } p.byline a { color: red; }

Both styles have a specificity of 12 (10 for a class name and 2 for two tag selectors) and both apply to the <a> tag. The two styles are tied. Which color does the browser use to color the link in the above paragraph? Answer: Red, since it's the second (and last) style in the sheet.

FREQUENTLY ASKED QUESTION
Get a Little Help

My head hurts from all of this. Isn't there some tool I can use to help me figure out how the cascade's affecting my Web page ?

Trying to figure out all the ins and outs of inherited properties and conflicting styles confuses many folks at first. Furthermore, doing the math to figure out a style's specificity isn't even your average Web designer's idea of fun, especially when there are large style sheets with lots of descendent selectors.

Fortunately, you have a few tools that can figure the cascade out for you. Dreamweaver 8 (www.adobe.com) includes a helpful CSS panel. A glance at it tells you which styles apply to any selected element and the end result of the cascade. In other words, you get an element's ultimate list of applied propertiesits "Frankenstyle". A less expensive alternative is the dedicated CSS editor Style Master (www.westciv.com/style_master/). With Style Master, you can select an element from a Web page and see which styles apply to it, including the properties of each style.

Then there's the free Firefox extension, View Formatted Source ( https ://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=697). It lets you view which styles apply to a particular element (though it doesn't show you any of the inherited styles).

Mac fans may want to check out XyleScope (www.culturedcode.com). XyleScope lets you look at any page on the Web (or your hard drive) and determine, among other things, which properties (from inherited or directly applied styles) apply to a given selection on the page. Finally, a free choice for Mac folk is Apple's Web browser, Safari. A Web Inspector feature provides a wealth of information about a Web page, its CSS, and the effect of the cascade on the page's tags. It isn't available in the currently shipping versions of Safari, but the adventurous can download a "nightly build" (meaning a work-in-progress) of Safari to test this feature now: http://webkit.opendarwin.org/blog/?p=41.

Now suppose that the style sheet looked like this instead:

 p.byline a { color: red; } p a.email { color: blue; }

In this case, the link would be blue . Since p a.email appears after p.byline a in the style sheet, its properties win out.

What happens if you've got conflicting rules in an external and an internal style sheet? In that case, the placement of your style sheets (within your HTML file) becomes very important. If you first add an internal style sheet using the <style> tag (Section 2.2) and then attach an external style sheet farther down in the HTML using the <link> tag (Section 2.4.2), then the style from the external style sheet wins. (In effect, it's the same principle at work that you just finished reading about: The style appearing last in the style sheet wins .) The bottom line: Be consistent in how you place external style sheets. It's best to list any external style sheets first, and then include any internal styles.

Tip: Any external style sheets attached with the @import rule have to appear before internal styles within a <style> tag. See Section 2.2 for more information on external and internal style sheets.

GEM IN THE ROUGH
Overruling Specificity

CSS provides a way of overruling specificity entirely. You can use this trick when you absolutely , positively want to make sure that a particular property can't be overridden by a more specific style. Simply insert !important after any property to shield it from specificity-based overrides .

For example, consider the two following styles:

 #nav a { color: red; } a { color: teal !important; }

Normally, a link inside an element with the ID of #nav would be colored red since the #nav a style is much more specific than the a tag style.

However, including !important after a property value means that specific property always wins. So in the above example, all links on the pageincluding those inside an element with the #nav idare teal.

Note that you apply !important to an individual property, not an entire style. Finally, when two styles both have !important applied to the same property, the more specific style's !important rule wins.

Internet Explorer 6 and earlier sometimes has trouble with !important rules, and occasionally completely ignores them.