In web development, CSS specificity plays a crucial role when multiple rules target the same element with different selectors affecting the same property. So, how do you determine which rule takes precedence over the others? The answer lies in the concept of specificity.

Let’s consider an example to understand this better:

<p class="dog-name">Roger</p>

We have two rules that target this <p> element:

.dog-name {
 color: yellow;
}

p {
 color: red;
}

In addition, we have another rule that targets p.dog-name. Now, which rule will take precedence and why? This is where specificity comes into play. The more specific rule will win, but if two or more rules have the same specificity, the one that appears last in the code will take precedence.

Calculating Specificity:

Specificity is calculated using a convention. It involves four slots, with each one starting at 0: 0 0 0 0. The leftmost slot is the most important, while the rightmost one is the least important.

  1. Slot 1: This slot represents the type selector, which is incremented for each type selector in the rule. For example:
p {
} /* 0 0 0 1 */

span {
} /* 0 0 0 1 */

p span {
} /* 0 0 0 2 */

p > span {
} /* 0 0 0 2 */

div p > span {
} /* 0 0 0 3 */
  1. Slot 2: This slot is incremented by three factors: class selectors, pseudo-class selectors, and attribute selectors. Each occurrence of these selectors increases the value of the second column from the right. For example:
.name {
} /* 0 0 1 0 */

.users .name {
} /* 0 0 2 0 */

[href$='.pdf'] {
} /* 0 0 1 0 */

:hover {
} /* 0 0 1 0 */

Slot 2 selectors can be combined with Slot 1 selectors to increase specificity. For example:

div .name {
} /* 0 0 1 1 */

a[href$='.pdf'] {
} /* 0 0 1 1 */

.pictures img:hover {
} /* 0 0 2 1 */
  1. Slot 3: This slot represents the most influential factor, the id selector. Using the id attribute on an element allows you to target it directly. For example:
#name {
} /* 0 1 0 0 */

.user #name {
} /* 0 1 1 0 */

#name span {
} /* 0 1 0 1 */
  1. Slot 4: This slot is affected by inline styles. Inline styles defined directly on the element using the style attribute have the highest precedence over any other rule defined externally or in the <style> tag within the page header. For example:
<p style="color: red">Test</p> /* 1 0 0 0 */

However, if !important is added to any rule, it fills Slot 5 and takes precedence over other rules.

Some Tips:

  • It is generally recommended to use the necessary level of specificity without going overboard. This allows for easier rule overwriting if needed.
  • The use of !important is a controversial topic among CSS experts. It is advised to avoid it whenever possible.
  • Instead of relying heavily on id attributes for styling, consider using classes. Classes have lower specificity, are more flexible, and can be reused multiple times.

Tools for Calculating Specificity:

To ease the calculation process, you can use tools like specificity calculators. One such tool is available at specificity.keegan.st, which automatically performs the specificity calculation for you.

Remembering and understanding CSS specificity is essential for creating clean and maintainable stylesheets. By mastering specificity, you can ensure that your stylesheets behave as intended and avoid confusion or unexpected results.