Specificity Scores
Specificity is a three-column score: (A, B, C). A = ID selectors, B = class/attribute/pseudo-class, C = type/pseudo-element selectors.
CSS
Beginner
4 min read
Calculating Specificity
Example
/* A B C */
h1 /* 0, 0, 1 */
.nav /* 0, 1, 0 */
h1.title /* 0, 1, 1 */
#main /* 1, 0, 0 */
#main .title /* 1, 1, 0 */
style="" /* 1, 0, 0, 0 (inline) */
/* Compare column by column left to right */ Pro Tip
A single ID (1,0,0) beats any number of classes — do not out-class an ID.