Css/Training/Priority level of selector
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;
}
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.