# Deepdive into CSS Specificity Algorithm

## Definition of Specificity

It is a set of rules where it is defined which property (like color, etc.) applies first and which would be last. This Algo. is responsible for in which condition which property will be applied to which component (like hover, mobile view).

## How Specificity is Calculated

### **Inline styling**

By using inline styling, we can also style a component or a tag. It is not part of the selector, which is why I put it before the “Selectors Weight Categories” section, although it carries the highest weight (1-0-0-0) among all.

<mark>*Specificity is calculated on basis of selectors weight</mark>

### Selectors Weight Categories

**ID Selectors:** An ID selector means a tag can be accessed by its ID. and it carries the highest weight (1-0-0) compared to the other selectors. `#example`

**Class Selectors:** An class selector means a tag can be accessed by its class. and it carries the 2nd highest weight (0-1-0) compared to the other selectors `.example` . And includes attribute selectors like `[type="radio"]` and`[lang|="fr"]` and pseudo-classes, such as`:hover` `:nth-of-type(3n)` and`:required` For each class, attribute selector, or pseudo-class in a matching selector.

**Element Selectors:** An tag selector can be accessed by its name `h1` `p` `table` and includes pseudo-elements `::before`. It carries weight (0-0-1)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1737895855243/5abc6e92-6067-4d38-81af-3533350f5391.png align="center")

### **Examples of Specificity in Action**

Let’s break it down with some examples:

In this case:

* The `p` selector has a specificity of **1**.
    
* `.container p` has a specificity of **11**.
    
* `#main p` has a specificity of **101**.
    

Result: The paragraph will be **red** because `#main p` has the highest specificity.

### **Common Pitfalls and How to Avoid Them**

1. **Overusing** `!important`  
    While `!important` can override specificity, it’s often considered bad practice because it makes your code harder to maintain. Use it sparingly.
    
    **Copy**
    
    **Copy**
    
    ```plaintext
     p {
       color: black !important;
     }
    ```
    
    In this case, the `!important` rule will win, regardless of specificity.
    
2. **Conflicting Rules**  
    If your styles are getting overridden, check for higher-specificity selectors or inline styles that might be the culprit.
    
3. **Using Too Many IDs**  
    IDs have very high specificity, so overusing them can lead to a cascade of specificity wars in your CSS. Favor classes for reusable styles.
    

### **How to Keep Specificity in Check**

1. **Stick to Classes**  
    Classes provide enough specificity for most use cases and are more reusable than IDs.
    
2. **Keep Your Selectors Simple**  
    Avoid overly complex selectors like `div ul li:first-child a`. They’re hard to read, and you might end up unintentionally increasing specificity.
    
3. **Organize Your Stylesheets**  
    Write your CSS in a way that minimizes conflicts. Group related styles and use a consistent naming convention.
    

### **Wrapping It Up**

CSS specificity might seem intimidating at first, but once you understand how it works, you’ll gain better control over your styles. Think of it as learning the rules of the road for CSS—once you’ve got them down, you’ll navigate your projects with ease.

Here’s a quick recap:

* Specificity is calculated based on the type of selector.
    
* Inline styles &gt; IDs &gt; Classes &gt; Elements.
    
* Avoid `!important` unless absolutely necessary.