CSS Selectors: Specificity

The following excerpts are from the book "CSS Master" written by Tiffany B. Brown. This book is available in stores around the world, and you can also purchase the e-book version here.

CSS specificity determines which style declarations ultimately apply to the element. Wildcard selector (*) has the lowest specificity and ID selector has the highest specificity. The descendant selector (e.g. p img) and the sub selector (e.g. .panel > h2) are more specific than the type selector (e.g. p, img, or h1).

At first glance, calculating accurate specificity values ​​seems tricky. As stated in Selector Level 3, you need:

• Statistics the number of ID selectors in the selector (= A)
• Statistics the number of class selectors, attribute selectors and pseudo-classes in selectors (= B)
• Statistics the number of type selectors and pseudo-elements in selectors (= C)
• Ignore the wildcard selector

These A, B and C values ​​are then combined to form the final specific value. For example, the ID selector #foo has a specificity of 1,0,0. The specificity of the attribute selector (e.g. [type=email]) and the class selector (e.g. .chart) is 0,1,0. Adding a pseudo-class (e.g. :first-child, e.g. .chart:first-child) will make the specificity 0,2,0. However, using a simple type or element selector (e.g. h1 or p) will only make the specificity 0,0,1.

Note: Calculate specificity

Keegan Street’s Specificity Calculator and Joshua Peek’s CSS Explain help learn and calculate selector specificity.

Of course, complex selectors and combined selectors will produce higher specificity values. Let's look at an example. Consider the following CSS:

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

These two rule sets are similar, but not the same. The first selector, ul#story-list > .bookreview, contains the type selector (ul), the ID selector (#story-list), and the class selector (.bookreview). Its specificity value is 1,1,1. The second selector #story-list > .book-review contains only the ID selector and the class selector. Its specificity value is 1,1,0. Even though our #story-list > .book-review rule is successfully applied to ul#story-list > .bookreview, the former is more specific, which means that elements with the .book-review class will be green Not orange.

Pseudoclasses such as :link or :invalid have the same level of specificity as class selectors. The specificity values ​​of a:link and a.external are both 0,1,1. Similarly, pseudo-elements such as ::before and ::after are as specific as types or element selectors. If the specificity of the two selectors is the same, the cascade takes effect. Here is an example:

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

If we apply this CSS, all links will be slate blue except for the links that apply the .external class. These links will be changed to orange.

Keeping low specificity helps prevent selector spread, i.e. the tendency of selector specificity and length to increase over time. This usually happens when you add new developers to your team or new content forms to your website. The spread of selectors can also lead to long-term maintenance difficulties. You end up either using a more specific selector to overwrite other rulesets or you need to refactor the code. The longer selector also increases the weight of the CSS file.

We discuss strategies for keeping specificity low in Chapter 2.

Conclusion

After reading this chapter, you should have a good understanding of the CSS selector. Specifically, you should know how to:

• Apply CSS to specific elements, pseudo-elements, and pseudo-classes using selectors
• Understand the difference between pseudo-elements and pseudo-classes
• Use newer pseudo-classes introduced in selector levels 3 and 4 specifications
• Computation specificity

In the next chapter, we will introduce some of the golden rules for writing maintainable, extensible CSS.

Frequently Asked Questions about CSS Selectors and Specificity (FAQ)

What is the importance of CSS specificity in web development?

CSS specificity is a key concept in web development because it determines which CSS rule the browser applies. When multiple CSS rules can be applied to an element, the browser follows specific rules to decide which rules to use. Understanding CSS specificity can help developers write more efficient and efficient CSS code, avoid unnecessary overrides, and troubleshoot CSS issues more effectively.

How to calculate CSS specificity?

The calculation of CSS specificity is based on different types of selectors used in CSS rules. Each type of selector has a different specificity value. Inline styles have the highest specificity, followed by ID selectors, class selectors, attribute selectors, and pseudo-classes, and finally type selectors and pseudo-elements. The specificity of a CSS rule is the sum of its selector-specific values.

Can you explain the concept of CSS specificity with an example?

Let's consider an example. Suppose we have a CSS rule with class selector .class1 and another rule with ID selector #id1. If these two rules can be applied to the same element, a rule with an ID selector is applied because the ID selector has a higher specificity than the class selector.

What happens when two CSS rules have the same specificity?

When two CSS rules have the same specificity, the last rule that appears in the CSS code will be applied. This is because CSS follows the “last rule win” strategy when dealing with rules with the same specificity.

How to cover CSS specificity?

You can override CSS specificity by increasing the specificity of CSS rules. This can be done by adding more specific selectors to the rules. Another way to override CSS specificity is to use the !important rule. However, !important should be avoided whenever possible, as it will make your CSS code more difficult to manage and debug.

What is the role of inheritance in CSS specificity?

Inheritance is a feature in CSS where certain types of attributes are automatically passed from the parent element to its child element. However, inherited styles have the lowest specificity and can be easily overwritten by any direct style applied to the element.

How does wildcard selector affect CSS specificity?

Wildcard selector (*) has no effect on CSS specificity. This means that its specificity value is 0,0,0,0. Therefore, any other selector used in the same rule will override the wildcard selector.

What is the specificity of pseudo-elements in CSS?

The specificity of the pseudo-element in CSS is 0,0,0,1. This means that they have the same specificity as type selectors (such as div, p, etc.) and are overridden by class selectors, ID selectors, and inline styles.

:Not() How does the pseudo-class affect CSS specificity?

The :not() pseudo-class in CSS does not increase selector specificity. Instead, the specific calculation is based on the parameters passed to the :not() function. For example, in :not(.class1), the specificity is the same as .class1.

Can I use multiple selectors in a single CSS rule? How does it affect specificity?

Yes, you can use multiple selectors in a single CSS rule. The specificity of such rules is the sum of all its selector specificities. For example, in #id1.class1, specificity is the sum of #id1 and .class1 specificity.

The above is the detailed content of CSS Selectors: Specificity. For more information, please follow other related articles on the PHP Chinese website!