CSS style priority

The priority level of the selector is decided by importance of selectors:

  • style attribute = a
  • number of ID attributes (# id=) in the selector = b
  • number of other attributes and pseudo-classes (. class=) in the selector = c
  • number of element names and pseudo-elements (<article>, <p>, <span>, etc.) in the selector = d

For example:

[index.html]

<body>
  <article>
    <p>This is <span id="red">paragraph</span>.</p>
  </article>
</body>

[style.css]

 article p span{
   color: blue;
 }
 #red{
   color: red;
 }

“article p span” are “a=0, b=0, c=0, d=3 (0003)“.
“#red” is “a=0, b=1, c=0, d=0 (0100)“.

In this instance, paragraph becomes a red character. Because “#red(0100)” is bigger than “article p span(0003)”.

Examples

In order of highest priority first:

a {color: red;}
#wrapper #content a {color: red;}
#content a {color: red;}
.content a {color:red}

CSS style priority was last modified: May 26th, 2015 by tabcom