5.2. Specificity: Which Style WinsThe 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:
The bigger the number, the greater the specificity. So say you create the following three styles:
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 WinsIt'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.
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.
|