HTML and CSS Reference
In-Depth Information
Specificity Points
Specificity points are intentionally hyphenated, as their values are not computed
from a base of 10. Class selectors do not hold a point value of 10, and ID select-
ors do not hold a point value of 100. Instead, these points should be read as
0-1-0
and
1-0-0
respectively. We'll take a closer look at why these point val-
ues are hyphenated shortly, when we combine selectors.
The higher the specificity weight of a selector, the more superiority the selector is given
when a styling conflict occurs. For example, if a paragraph element is selected using a type
selector in one place and an ID selector in another, the ID selector will take precedence
over the type selector regardless of where the ID selector appears in the cascade.
HTML
1.
<p id="food">...</p>
CSS
1.
#food {
2.
background: green;
3.
}
4.
p {
5.
background: orange;
6.
}
Here we have a paragraph element with an ID attribute value of
food
. Within our CSS,
that paragraph is being selected by two different kinds of selectors: one type selector and
one ID selector. Although the type selector comes after the ID selector in the cascade,
the ID selector takes precedence over the type selector because it has a higher specificity
weight; consequently the paragraph will appear with a
green
background.
The specificity weights of different types of selectors are incredibly important to remember.
At times styles may not appear on elements as intended, and chances are the specificity
weights of our selectors are breaking the cascade, therefore our styles are not appearing
properly.
Understanding how the cascade and specificity work is a huge hurdle, and we'll continue
to cover this topic. For now, let's look at how to be a little more particular and intentional
with our selectors by combining them. Keep in mind that as we combine selectors, we'll
also be changing their specificity.
Search WWH ::
Custom Search