HTML and CSS Reference
■ ■ ■
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.
The contents of any h1 element
The contents of any strong element
The contents of any p element
with a class of note
The contents of the body element
with the ID of contact
The contents of any li element
with the ID of nav-portfolio and
a class of current