<p><strong>I feel so strong.</strong></p>
On page 57, we already met a similar conflict when we directly set two different col-
ors (blue and gray) to the same element (<h6>), except now the con flict has com e
about more indirectly. Nevertheless, it falls under the same jurisdiction of the already-
mentioned mechan ism called cascade. Both declarations of the co lor property in the
example on page 57 were eq ually specific, for they were both applied to the <h6>
element directly throu gh the h6 elem ent selector. Becau se the specificity of both dec-
larations was the same, the last of the ap plied styles won.
This tim e, however, the two styles that apply to the inner <st rong> element are not
equally specific. The style applied directly to the <strong> element is more specific
than the one applied to <p> and only inherited by <st rong>. That’s why the text “I
feel so strong” gets a purple appear ance, even if the col or: blue; declaration is
more recent.
Thus we have arrived at the second cascade rule, which says that the most specific
style always w ins. The most specific style is always the one directly applied to the
element, or, if there is no style applied to it, the one applied to its nearest ancestor.
Maria: You still haven’t quite answered my question . If the hyperlink text appears in
a different color even when we have explicitly styled one of its ancestors, then there
should have been some more specific style applied to the <a> element. But there ’s
not.
Professor: In fact th ere is. Behind the scenes, browsers have their own predefined
(default) styles for certain elements. So even if it looks like the closest style is that
of the pa rent, this is not necessarily so because the browser ma y have in mind a more
specific sty le for the element.
Mike: A nd if I apply my own style directly to an eleme nt, my style will win becau se
it is more recent than that of the browser. Right?
Professor: Exactly.
4.8 Determining Style Specificity
Professor: Le t me summarize the main two rules of cascade: first, the most specific
style win s, and second, when the specificity is the same, the most recently applied
style wins. Since most severe headaches are caused by misinterpretation of which
style is more specific, let us examine this matter a little more closely.
Fortunately, CSS provides a formula for calculating the specificity of a style. In a
nutshell, each selector gets a corresponding number of points that reflect its specificity:
• 1 poin t for an element selector (e.g., strong).
• 10 points for a cla ss selector (e.g., .importan t).
• 100 poin ts for an ID selector (e.g., #superhero).
64 Meeting 4. More Contr ol over Style
• 1000 points for an inline style.
Incidenta lly, the universal asterisk selector has a z ero specificity value.
The points are simply added up for each of the styles and, if two or more styles collide,
the one with the high est score wins. Let me illum inate this with an example with f our
different styles:
p .jazzy { /* 1 + 10 = 11 points */
color: blue;
}
p strong { /* 1 + 1 = 2 points */
color: red;
}
strong { /* 1 point */
color: orange
}
#almighty { /* 100 points */
color: green;
}
Suppose we apply these styles to the following HTM L code fragment:
<p>
<strong class="jazzy">I’m blue.</strong>
<strong>I’m red.</strong>
<strong class="jazzy" id="almighty" style="color: black;">
I’m black.
</strong>
</p>
The styling of the first of the <str ong> elements looks quite straightforward although
it is not. As a matter of fact, three styles collide at th at e le ment. One of them is
with the strong element selector, which only has 1 po int. The second one is with
the nested selector p strong, which receives 2 points since it is composed of two
element selectors. The winner actually is the third one, the style with the nested
selector p .jaz zy, which collects 11 poin ts (1 from the eleme nt selector p and 10
from the class selector .jazzy ).
Can you figure out how the styling works on the other two <strong> ele ments?
Mike: T hat’s easy. The story with the second one is the same as with the first one, ex-
cept tha t the p .jazzy selector falls out of the game. T he la st one has, if I understood
you cor rectly, five styles applied to it.
Professor: Which are?
Mike: All the above four styles p lus the inline style, which is obviously the winner
with its 1000 p oints.
Professor: I ndeed!
4.8. Determining Style Specificity 65
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.