CSS/Training/Priority level of selector

From W3C Wiki
< CSS‎ | Training
Jump to: navigation, search

Priority level of selector

Calculating a selector's specificity

The priority level of the selector is decided in Point of combination of selectors.

  • style attribute = a
  • number of ID attributes in the selector = b
  • number of other attributes and pseudo-classes in the selector = c
  • number of element names and pseudo-elements in the selector = d

For example, If it is a combination of the following selectors:


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


 article p span{
   color: blue;
   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)".

See also 6.4.3 Calculating a selector's specificity



<div id="wrapper">
  <header id="top">
    <h1>W3C cafe</h1>
    <div id="hright">
        <ul id="gnavi">
          <li>about us</li>


#wrapper header div nav #gnavi{
  list-style-type: none;
#top #hright #gnavi{
  list-style-type: square;

Cssed priority.png

In this case, the markers of list are changed to "square". Because "#top #hright #gnavi(a=0, b=3, c=0, d=0)" is bigger than "#wrapper header div nav #gnavi(a=0, b=2, c=0, d=3)".

You finished the CSS educational materials for beginners.
The property that explains with this teaching material is a part of specifications. Please refer to list of CSS Property when there is a property that doesn't understand when you are creating the Web site.