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:

[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)".


See also 6.4.3 Calculating a selector's specificity

Example

[index.html]

<body>
<div id="wrapper">
  <header id="top">
    <h1>W3C cafe</h1>
    <div id="hright">
      <nav>
        <ul id="gnavi">
          <li>menu</li>
          <li>location</li>
          <li>about us</li>
          <li>recruit</li>
        </ul>
      </nav>
    </div>
  </header>
</div>
</body>

[style.css]

#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)".


Congratulations!
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.