HTML and CSS Reference
In-Depth Information
APPENDIX B
■ ■ ■
CSS Specificity Chart
K
nowing how to calculate specificity is key to mastering CSS, so to that end, we've created
this chart as a quick reference to turn to whenever you need to polish up on your calculations.
Bear in mind that while we're only using three columns in this chart, the fourth column to the
left still exists for any properties labeled
!important
, and that the
universal selector
(
*
) is equal
to 0 in all columns (see Chapter 3 for details).
The columns in this chart list an example selector, its specificity score, and then a description
of which element(s) the selector targets in plain English.
Element Selectors
# of
# of
# of
Selector
IDs
Classes
Elements
In English
h1
The contents of any
h1
element
0,
0,
1
strong
The contents of any
strong
element
0,
0,
1
p.note
The contents of any
p
element
with a class of
note
0,
1,
1
body#contact
The contents of the
body
element
with the ID of
contact
1,
0,
1
li#nav-portfolio.
The contents of any
li
element
1,
1,
1
current
with the ID of
nav-portfolio
and
a class of
current
351
