HTML and CSS Reference
In-Depth Information
Figure 2-10.
The first letter of each paragraph is displayed in a larger font size
What Happens When Style Rules Conflict?
As mentioned in
Chapter 1
, the basic principle of the cascade is that a style definition that comes after another
overrides the earlier one in case of a conflict. However, not all selectors are equal. Calculating which style rule
wins also depends on a concept known as
specificity
.
You calculate the specificity of a style rule by counting the value of each part of its selector. The CSS2.1 and
proposed CSS3 specifications express the values in slightly different ways, but the underlying calculation remains
exactly the same. The CSS3 version is easier to understand, so I'll start with that and then explain the CSS2.1
formula so that you know what it means if you ever come across it.
•
Count the number of ID selectors in the selector as
a
.
Count the number of class selectors, pseudo-classes, and attribute selectors in the
•
selector as
b
.
Count the number of type selectors and pseudo-elements in the selector as
•
c
.
•
Ignore the universal selector.
•
String
abc
together to get the selector's specificity.
Inline styles always take precedence.
•
In other words, ID selectors have a value of 100; class, pseudo-class, and attribute selectors each have a value
of 10; and type selectors and pseudo-elements have a value of 1.
The CSS2.1 formula expresses each group as a comma-separated list of four numbers. The values are
assigned like this:
•
Inline style: 1, 0, 0, 0
•
ID selector: 0, 1, 0, 0
•
Class, pseudo-class, or attribute selector: 0, 0, 1, 0
•
Type selector or pseudo-element: 0, 0, 0, 1
Using both formulas, you can calculate the specificity of selectors used in the exercises like this:
