HTML and CSS Reference
In-Depth Information
ment. So what will the size of the font actually be? Well, since the rule set that defines the
font size at 30px appears after the previous rule set, then the font will be sized at 30px.
This is a very simple example, but it neatly demonstrates how selectors targeting styles later
in a CSS document have precedence over the same selectors that appear earlier in the CSS
file. Simple, right? Unfortunately,different selectors have different levels ofspecificity.Look
at the following example:
div p {
color: blue;
}
p {
color: red;
}
If all the
<p>
elements on a web page were nested inside a
<div>
, the first rule set (which
uses
div p
,) would always apply, overriding any of the same styles defined in the second
rule set (which uses only
p
). This is because the descendant selector (used in the first ex-
ample) takes precedence over the element type selector (used in the second example).
In this instance, the color value for paragraph elements inside of
<div>
elements will be
blue
—despite the fact that the second color declaration appears later in the document. So
although the browser does give some importance to the order of these rule sets, that order is
superseded by the specificity of the first rule set.
Here's another example:
#main {
color: green;
}
body div.container {
color: pink;
}
which assumes the following HTML:
