As a web developer, you might get frustrated while writing CSS to a component or element since you don't understand why it isn't working. I've run into issues before while applying CSS properties by overwriting previous declarations, and I'm sure you have as well. In this article, I'll go through CSS specificity in detail so that you can overcome this problem and can build well-structured, easy-to-maintain code.

Specificity

Specificity is the browser algorithm that determines which CSS declaration has the last say by evaluating the weight of CSS declarations while selecting a style for an element with multiple CSS declarations.

Considering five-column weights is the easiest technique to understand specificity. To the left, start with the !important keyword, then move to the right with inline style CSS, ID selector, class selector, and lastly element selector with decreasing order of importance.

!important

!important keyword used besides CSS property while declaration. In the order of preference, it has the most weight. For a specific element, the !important keyword can be used to override all other CSS selectors. However, it should be used with caution to avoid being unable to overwrite further in the code. Because it interrupts the style cascade, using the !important keyword makes maintenance nearly impossible. The usage of the !important is considered bad practice. If it's only needed in particular situations, comment it out of the code to make future maintenance easier. If the same element is marked with !important more than once, the next specificity weight will be considered.

p {       
background-color: "red";
}
p {
background-color: "blue" !important;
}

In the code above, blue is applied as background-color of p tag as it is declared with !important keyword.

.box-container h1 {    
  color: "blue"!important;
}

#page-container .box-container h1 {  
  color: "red"!important;
}

Because the !important keyword is used in both situations, the code will go over each weight in the sequence one by one from left to right. Due to presence of the Id selector in second case, red will be applied to the provided element.

Inline style

In the order of specificity, inline style follows next. For a particular element, the inline style overrides all declarations, regardless of the weights of ID selectors or class selectors. Using the !important keyword is the only way to overwrite the inline style. Because inline style has more specificity, black will be used over the text "Hello World" in the example below.

//HTML
<body> 
   <h1 id="header" style="color: black">Hello World</h1> 
</body>

//CSS
#header h1 { 
  color: "blue";
}

#ID selector

Other selectors such as class, pseudo-class, attribute, element, and pseudo-elements are less important than the id selector. Declarative with the same amount of ID selectors can be overridden by applying inline CSS or using the !important keyword.

#id {       
  color: "green";
}
.class1 .class2 { 
  color: "blue";
}

Despite the fact that the second case has two class selectors, the first case will take precedence since ID is more specific than class selectors because it occurs before class in the specificity array.

.Class selector

When two selectors have the same amount of id selectors (assuming neither !important keyword nor inline style), the class selector specificity is used to compare them. This class specificity fills the third number in the sequence with the count of all class, attribute, and pseudo-classes in the selector.

.header .btn:hover { 
  color: "black"; 
}

#form .form-input[type="password"] {  
  color: "gray';
}

Type selectors

As previously stated, specificity calculations begin at the left and work their way to the right of the specificity array, moving on only if the count of provided selectors is the same.

body div h1 {    
  color: "blue";
}

Note: Combinators like +, >, " ", and || have no effect on the specificity value.

Some good practices

In the first place, try to utilise low specific weight declarations so that you may simply override a particular property in the future.
For better readability and maintenance, you should employ low-specific semantic HTML elements as much as feasible.
Try to avoid using the !important keyword as much as possible because changing CSS will be a pain.
Try to avoid using inline style because it will make your code look unorganised and tough to maintain.

I hope you fully comprehend the significance and concept of specificity. Please pass it forward to your contacts and share your ideas in the comments section below. Thank you!

Sanjay Jatti's blog