HTML and CSS Reference
In-Depth Information
So how do you calculate the specificity of a particular selector? It's fairly
straightforward if you take into account that specificity will be represented
as four numbers separated by commas, like: 1, 1, 1, 1 or 0, 2, 0, 1
1.
The first digit (a) is always zero, unless there is a style attribute applied
to that element within the markup itself
2. The second digit (b) is the sum of the number of IDs in that selector
3. The third digit (c) is the sum of other attribute selectors and pseudo-
classes in that selector. Classes (
.example
) and attribute selectors (eg.
li[id=red]
)
are included here.
4. The fourth digit (d) counts the elements (like
table
,
p
,
div
,
etc.) and
pseudo-elements (like
:first-line
)
5. The universal selector (*) has a specificity of zero
6. If two selectors have the same specificity, the one that comes last on
the stylesheet will be applied
Let's take a look at a few examples, to make it easier to understand:
•
#sidebar h2
— 0, 1, 0, 1
•
h2.title
— 0, 0, 1, 1
•
h2 + p
— 0, 0, 0, 2
•
#sidebar p:first-line
— 0, 1, 0, 2
From the following selectors, the first one is the one who will be applied to
the element, because it has the higher specificity:
•
#sidebar p#first
{ color: red; }
— 0, 2, 0, 1
•
#sidebar p:first-line { color: blue; }
— 0, 1, 0, 2
