HTML and CSS Reference
In-Depth Information
Cascading Properties
The cascade also works with properties inside individual selectors. Again, for example, say
we select all the paragraph elements and set their background color to
orange
. Then dir-
ectly below the
orange
background property and value declaration, we add another prop-
erty and value declaration setting the background color to
green
, as seen here.
1.
p {
2.
background: orange;
3.
background: green;
4.
}
Because the
green
background color declaration comes after the
orange
background
color declaration, it will overrule the
orange
background, and, as before, our paragraphs
will appear with a
green
background.
All styles will cascade from the top of our style sheet to the bottom of our style sheet. There
are, however, times where the cascade doesn't play so nicely. Those times occur when dif-
ferent types of selectors are used and the specificity of those selectors breaks the cascade.
Let's take a look.
Calculating Specificity
Every selector in CSS has a specificity weight. A selector's specificity weight, along with
its placement in the cascade, identifies how its styles will be rendered.
In
Lesson 1
, “
Building Your First Web Page
,” we talked about three different types of se-
lectors: the type, class, and ID selectors. Each of these selectors has a different specificity
weight.
The type selector has the lowest specificity weight and holds a point value of
0-0-1
. The
class selector has a medium specificity weight and holds a point value of
0-1-0
. Lastly,
the ID selector has a high specificity weight and holds a point value of
1-0-0
. As we can
see, specificity points are calculated using three columns. The first column counts ID se-
lectors, the second column counts class selectors, and the third column counts type select-
ors.
What's important to note here is that the ID selector has a higher specificity weight than the
class selector, and the class selector has a higher specificity weight than the type selector.
Search WWH ::
Custom Search