Loading Please Wait...
CSS Selector Specificity is the method used by the browsers to the CSS declarations (rules and styles) to apply for the element if there are multiple declarations for the same element having same property.
Algorithm calculate weight of the CSS selectors to determine the rules to apply.
CSS specificity is a three column weight value category that is ID-Class-Type representing the three selectors. The value for each weight represent the count of selector components in each weight.
ID weight includes only ID selectors like #navigation.
Specificity ID-Class-Type = 1-0-0
Class weight includes class selectors like .navigation, attribute selectors like [title="Lynxsia"], and pseudo-class selectors like :first-child.
Specificity ID-Class-Type = 0-1-0
Class weight includes element selectors like h1, and pseudo-element selectors like ::placeholder.
Specificity ID-Class-Type = 0-0-1
The universal selectors weight is ignored.
Pseudo-class :where() and its parameter weight is ignored.
The universal selectors (+, ~, ||, >, " ") weight is ignored.
Pseudo-class :not(), :is(), :has() weight is ignored. However their parameter weight is considered.
CSS specificity is calculated from matching selectors. See below example where rules are comma separated:
#website, /* Specificity = 1-0-0 */
.link, /* Specificity = 0-1-0 */
p, /* Specificity = 0-0-1 */
a:hover, /* Specificity = 0-1-1 */
[href]{ /* Specificity = 0-1-0 */
color: green;
}
#website: ID weight with specificity 1-0-0 and apply green color to the element having ID #website.
.link: Class weight with specificity 0-1-0 and apply green color to the all elements having class .link.
p: Type weight with specificity 0-0-1 and apply green color to the all <a> elementa.
a:hover Type and Class weight with specificity 0-1-1 and apply green color to the all <a> elements when hover.
[href] Class weight with specificity 0-1-0 and apply green color to the all elements having href attributes.
Let's consider, we have an <a href="about.html" class="link"> element then the specificity is 0-2-1. 1 for class ".link", 1 for attribute "href", and 1 for element type.
The specificity for the same element when hover is 0-3-1. 1 for class ".link", 1 for attribute "href", 1 for element type and 1 for pseudo-class ":hover".
The specificity is compared from left to right. The specificity wins if it has the greater number in first column. If first column is same then compare the second column and so on. It does not matter if second or third columns have greater number first column always wins if it is greater.
Some Case Example
| Specificity 1 | Specificity 2 | Result |
|---|---|---|
| 1-0-0 | 0-5-0 | Specificity 1 |
| 1-1-0 | 1-2-0 | Specificity 2 |
| 1-0-5 | 1-2-0 | Specificity 2 |
| 1-2-5 | 1-2-3 | Specificity 1 |
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved