Specificity
Understanding how CSS decides which rule to apply is essential, especially when multiple selectors target the same element. This decision is made using specificity, a system that calculates which selector is more "specific" and should therefore win when rules conflict.
Specificity is determined by assigning values based on the types of selectors used:
- Inline styles: highest specificity (not shown in this example);
- ID selectors (
#id): high specificity; - Class selectors (
.class), attribute selectors, and pseudo-classes: medium specificity; - Type selectors (
element) and pseudo-elements: low specificity.
To break it down, specificity is calculated as a four-part value (a, b, c, d):
- a: inline styles (not shown here);
- b: number of ID selectors;
- c: number of class selectors, attributes, and pseudo-classes;
- d: number of element selectors and pseudo-elements.
index.html
style.css
For the rules in the example, here is how specificity applies:
p { color: blue; }has specificity (0,0,0,1) β only a type selector;.highlight { color: green; }has specificity (0,0,1,0) β one class selector;#special { color: orange; }has specificity (0,1,0,0) β one ID selector;#main-title.highlight { color: purple; }has specificity (0,1,1,0) β one ID and one class.
When more than one rule matches, the rule with the highest specificity wins. If two selectors have the same specificity, the one that comes last in the stylesheet is applied.
For example, the <h1 id="main-title" class="highlight"> element matches both .highlight and #main-title.highlight. The latter is more specific because it combines an ID and a class, so it will set the color to purple.
Similarly, <p class="highlight"> matches both the p and .highlight rules. The .highlight class is more specific than the type selector, so the paragraph will be green.
The <p id="special"> element will be orange because the ID selector is more specific than the type selector.
Always keep specificity in mind when writing CSS to avoid unexpected results and to ensure your styles apply as intended.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 6.67Specificity
Swipe to show menu
Understanding how CSS decides which rule to apply is essential, especially when multiple selectors target the same element. This decision is made using specificity, a system that calculates which selector is more "specific" and should therefore win when rules conflict.
Specificity is determined by assigning values based on the types of selectors used:
- Inline styles: highest specificity (not shown in this example);
- ID selectors (
#id): high specificity; - Class selectors (
.class), attribute selectors, and pseudo-classes: medium specificity; - Type selectors (
element) and pseudo-elements: low specificity.
To break it down, specificity is calculated as a four-part value (a, b, c, d):
- a: inline styles (not shown here);
- b: number of ID selectors;
- c: number of class selectors, attributes, and pseudo-classes;
- d: number of element selectors and pseudo-elements.
index.html
style.css
For the rules in the example, here is how specificity applies:
p { color: blue; }has specificity (0,0,0,1) β only a type selector;.highlight { color: green; }has specificity (0,0,1,0) β one class selector;#special { color: orange; }has specificity (0,1,0,0) β one ID selector;#main-title.highlight { color: purple; }has specificity (0,1,1,0) β one ID and one class.
When more than one rule matches, the rule with the highest specificity wins. If two selectors have the same specificity, the one that comes last in the stylesheet is applied.
For example, the <h1 id="main-title" class="highlight"> element matches both .highlight and #main-title.highlight. The latter is more specific because it combines an ID and a class, so it will set the color to purple.
Similarly, <p class="highlight"> matches both the p and .highlight rules. The .highlight class is more specific than the type selector, so the paragraph will be green.
The <p id="special"> element will be orange because the ID selector is more specific than the type selector.
Always keep specificity in mind when writing CSS to avoid unexpected results and to ensure your styles apply as intended.
Thanks for your feedback!
