If a CSS rule doesn’t seem to work when it looks like it should and your
code appears to be written correctly, or perhaps an element you’re trying to
style won’t apply in any browser, your CSS rules are suffering from a CSS
specificity conflict. While the concept isn’t new to the web developer
landscape, it’s still probably one of the trickiest to grasp. I’ll explain the
CSS specificity hierarchy in a way that hopefully makes it easier to understand
and then present several examples.
CSS specificity hierarchy
Specificity as stipulated by the W3C is
calculated by first separating out the CSS selectors and rules into four categories
or groups, and then assigning each group a ranking that allocates a weighted value.
For graphical representation purposes, the first categorized grouping on the
left side has a higher specificity value, and as the groupings move from left
to right, the specificity values continue to decrease, with the last grouping
having the least specificity value. The specificity is based only on the form
of the selector.
For each CSS rule, you then concatenate the four figures A-B-C-D into a simple
mnemonic large-base numbering system for notational purposes to determine the
specificity value. The four groupings of selectors and their associated specificity
values and optional value expressions are listed below.
The W3C calculates a selector’s specificity as follows:
- A. Count if an element has an in-line style rule and apply the value 1,0,0,0 or A=1, B=0, C=0, D=0 or x,0,0,0.
- B. Count the number of ID attributes in the selector and apply the value 0,1,0,0 for each or A=0, B=1, C=0, D=0 or 0,x,0,0.
- C. Count the number of classes, pseudo-classes, and other attributes in the selector and apply the value 0,0,1,0 for each or A=0, B=0, C=1, D=0 or 0,0,x,0.
- D. Count the number of element names and pseudo-elements in the selector and apply the value 0,0,0,1 for each or A=0, B=0, C=0, D=1 or 0,0,0,x.
With artistic license and inspiration from the post by Chris Coyier on the subject, my graphic in Figure A illustrates the CSS selectors
groupings and specificity, showing their associated placement, their associated
character figure, an example of each type of selector, the selector type, and its
place along the specificity scale.
Figure A
Given the nature of CSS
specificity, the in-line style attributes always win and override any other
attribute or elements. Any ID attribute will always outdo a class or
pseudo-class attribute; in fact, any number of class attributes will always be
overruled by any one ID. In effect, a selector with a higher specificity value
will always trump a selector with a lower specificity value.
Examples of CSS specificity
The examples below will
help to illustrate each of the CSS selectors and specificity in action.
Color attribute within an in-line style overrides paragraph element in external
CSS
The in-line style color attribute for the green shaded paragraph content
is illustrated in the code snippet:
<p style="color:#060;">
This example of in-line style has a specificity value of 1,0,0,0 and will
override any local or external CSS that is applied for the color attribute
within that paragraph element. Even if we put in a paragraph element style
within any external CSS with a color attribute, it will always remain the green
shade for that paragraph. Because an element has a specificity value of 0,0,0,1,
in this case the paragraph element gets overridden by the in-line style with a
specificity value of 1,0,0,0.
In the example above, I set the sample paragraph with the in-line style
and then applied a blue color to all paragraph elements within the external style
sheet. The code snippet of the external CSS and the resulting output for both the
in-line style and the paragraph element are displayed in Figure B as viewed in the
Chrome browser.
Figure B
p { color: #06F; }
ID attribute overrides class attribute
In this example I demonstrate how an ID attribute will override a class
attribute linked from an external CSS file while applied to a sample <section>
container. The following two CSS code snippets for the “sidebar”
offer two distinctly different styles.
The ID:
#sidebarID { float: left; width: 50%; background:#0FC; padding-bottom: 5px;}
The Class:Â
.sidebar1 { float: left; width: 25%; background: #CCC; padding-bottom: 10px; }
And the following HTML code snippet for the <section> is displayed
below:
<section class="sidebar1" id="sidebarID">
When both the Class and ID are applied to the section as coded in the
HTML displayed above, the ID selector wins out since it has a specificity value
of 0,1,0,0, and the Class selector has a value of 0,0,1,0. The resulting <section>
as displayed in the Chrome browser is displayed in Figure C with the overriding
ID selector applied.
Figure C
When the ID is not applied and the Class is called within the
<section> by itself, it results in the following as displayed in the
Chrome browser (Figure D).
Figure D
More CSS specificity example calculations
For demonstration purposes I will list a few examples of CSS selector
combinations and their resulting specificity outcomes; this will also help in
understanding how the values are applied in particular situations and sequences. These sample CSS selectors can be
found in the CSS Specificity Calculator.
html > body – Two elements represented as a specificity value of 0,0,0,2.
#body — One ID represented as a specificity value of 0,1,0,0.
#body.frontpage.default — One ID and two classes represented as a specificity value of 0,1,2,0.
iv#main-content a:focus — One ID, one class, and two elements represented as 0,1,1,2.
.w3c.js.flexbox.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths — 42 classes represented as 0,0,42,0.
Additional resources about CSS specificity rules
- CSS Specificity Calculator:Â The calculator has its limitations as it cannot include
in-line styles; however, you can paste CSS snippets from your code and
run the calculator to view the output, with options to show the details of how
the results were calculated. - Calculating a selector’s specificity:Â This is the W3C specification for calculating CSS
selectors specificity. - CSS Specificity:Â The site provides a unique infographic with icons representing various combinations of
selectors along with a legend, an About section, and links to the CSS Dev
Conference.