CSS Selectors and Specificity

When you are applying more than one style to your web page on the same element, it is difficult to find out which one takes precedence. You can figure it out using CSS selector specificity and priority. In this blog, we will discuss what CSS selectors and specificity are, and how CSS specificity works.

Table of Contents:

• What are CSS Selectors?
• What is CSS Specificity?
  • Understanding How CSS Specificity Works
• Specificity Hierarchy
  • Example of Specificity Calculation
• The !Important Rule
• How to Avoid Specificity Issues?
• Debugging Specificity Issues
• Conclusion

What are CSS Selectors?

CSS selectors are used to select the HTML elements that you want to style. They tell the browser on which elements it should apply styling. There are different types of selectors, which are:

• Universal Selector: It selects the whole document. (e.g., *)
• Element selector: It selects all elements of one type. (e.g., h1, p)
• Class selector: It selects elements with a specific class. (e.g., .title)
• ID selector: It selects an element with a specific ID. (e.g., #header)
• Attribute selector: It selects elements based on their attributes. (e.g., [type=”text”])
• Pseudo-class and pseudo-element selectors: It selects specific states or parts of elements (e.g., :hover, ::after)

What is CSS Specificity?

It decides which style is applied when multiple selectors target the same element. It helps you find which style has taken charge. You can specify it based on the types of selectors you were using. The higher the specificity, the more important the style becomes.

Understanding How CSS Specificity Works

You can get various types of selectors in CSS. You can calculate the specificity of a selector based on some set of rules, which determine which style should take the highest priority. 

• Inline Styles: The element that got styled using the direct style tag gets the highest priority in CSS. You can see they always override all other styles, no matter where the other styles come from.

Example: 

   <p style="color: red;">This is a red paragraph.</p>

• ID selectors: Compared to the class or element selectors, the ID selector has the highest specificity. It applies when multiple styles apply to the same element. 

Example:

   #main-title {
    color: blue;
   }

• Class, Attribute, and Pseudo-Class Selectors: These selectors have fewer ID selectors but are more specific than element selectors. It lies in the middle when determining the style’s priority.
  
• Element and Pseudo-Element Selectors: The least specific selectors.

Master the Tools and Techniques Used by Industry Experts

Mastering Web Development

Explore Program

Specificity Hierarchy

Let’s see how the specificity hierarchy works:

• Inline styles (added using the style attribute) score 1000, giving them the highest priority.
• ID selectors (like #id): Score 100, giving them high priority but less than inline styles.
• Class, attribute, and pseudo-class selectors (like .class, [attr], and:hover) score 10, placing them in the middle.
• Element and pseudo-element selectors (like h1, ::before): Score 1, giving them the least priority.

Example of Specificity Calculation

h1 { color: black; }		/* Specificity: 1 */
.title { color: blue; }		/* Specificity: 10 */
#main-title { color: red; }	/* Specificity: 100 */

When you apply these three styles to the h1, the text color turns red because it has the highest specificity. 

The !Important Rule

You can use !important in a style declaration to override all others without considering its specificity. 

Example:

p {
  color: blue !important;
}

This rule even overrides the inline style. If you find another element with !important, then the element with the highest specificity takes first priority.

How to Avoid Specificity Issues?

• Stick to Simpler Selectors: You can use class selectors instead of IDs.
• Avoid Too Much Nesting: You can avoid over-nesting selectors since it makes them unnecessarily specific and harder to manage.
• Use !important only when necessary: You can avoid overusing it because it may cause many bugs in the code.
• Keep a Style Guide: A well-organized CSS prevents problems, and you can get clean code.
• Apply CSS Resets or Normalize.css: You can use it to remove browser inconsistencies.
• Follow a Naming Convention: You can follow methods like BEM (Block Element Modifier) to help in CSS management.
• Use CSS Variables: You can use variables to simplify the repeated styles and reduce the problems related to specificity. 

Debugging Specificity Issues

Here are some strategies to debug specificity-related problems in CSS:

1. Use Developer Tools: Use browsers like Chrome and Firefox, which have “Inspect Element” tools for reviewing the applied styles directly.

2. Check Computed Styles: You can use the “Computed” tab in dev tools to show the final styles that apply to an element.

3. Use Online Specificity Calculators: Use the Specificity Calculator to help you figure out selector weights and solve the conflicts.

4. Refactor CSS: Reorganize the style sheet if you face an issue regarding the specificity. 

Conclusion

Specificity in CSS determines the priority of the styles when many styles have been applied to the elements. The inline styles have the highest priority (1000), followed by ID selectors (100), class/attribute/pseudo-class selectors (10), and element/pseudo-element selectors (1). You can also use !important to override all the specificity rules. You can avoid the issues related to specificity, and you can depend on the class selectors, avoid over-nesting, and avoid overusing !important.  

Understanding CSS Selector Priority/Specificity – FAQs