---
title: "Take full control of your Styles with CSS Specificity"
description: "Are you struggling with CSS overrides? Here’s your chance to learn about CSS specificity - how it works, how to calculate it, and best practices to ensure your styles apply as intended."
url: https://www.specbee.com/blogs/take-control-of-your-styles-with-css-specificity
type: Article
author: Ravikant
categories: "Design Digest"
published: 2025-02-18
updated: 2026-10-07
---

# Take full control of your Styles with CSS Specificity

If you’re hearing about **CSS Specificity** for the first time, let’s break it down for you.

Think of it like giving directions in a family. Suppose you're planning a trip. Your cousin suggests a route, your sibling insists on a shortcut, but then your mom steps in and says, “We’re taking this road, and that’s final.” Who wins? Your mom, of course (in most cases). Because her decision carries the most authority.

CSS works the same way. When multiple styles target the same element, the most specific rule takes precedence. Understanding specificity helps ensure your styles work as expected, preventing unexpected overrides and confusion.

In this article, you will get a knowledge boost on CSS Specificity

## What is CSS Specificity

It’s a set of rules that determines applying styles to an element when multiple styles are applied. The highest specificity means the highest priority, and that style will be applied to the HTML text. The concept of CSS specificity comes into play when more than one [CSS rule](https://www.specbee.com/blogs/integrating-drupal-and-tailwind-css) targets the same element. In such cases, the selector with the highest specificity is given the highest priority and applied.

## Why is Understanding Specificity Important

We can learn CSS quickly and start working easily, but understanding specificity is crucial if:

- Many front-end developers are working on the same project.
- You’re making changes to previously completed projects as a maintainer.

To understand how browsers determine which [CSS properties](https://www.specbee.com/blogs/why-stylus-more-flexible-than-scss-and-how-to-implement-in-drupal) to apply when multiple styles affect an element, we need to answer:

- How does the browser determine which CSS properties to apply?
- How can I calculate the CSS priority weight applied to an element?

## How to Determine the Specificity of Styles

To answer these questions, we can understand specificity in two parts:

1. Specificity Hierarchy (Most Specific Selector)
2. Specificity Calculation (Most Weighted Selector)

## Specificity Hierarchy

Every CSS selector has an inherent priority level in the specificity hierarchy, as described below:

**Selector Priority****Description**Inline Styles (e.g., style="...")Highest priority, because it applies directly using the style attribute.IDsSecond highest priority, identified by the unique id attribute of an element.Classes, attributes, and pseudo-classesMedium level of specificity.Elements and pseudo-elementsLowest priority.#### Example:

**h2.title** will be applied over **.title.** Inherited styles can be overridden by making them more specific.

## Specificity Calculation

When [multiple CSS rules](https://www.specbee.com/blogs/how-to-create-custom-module-and-add-css-libraries-in-drupal) apply to the same element, built-in rules assign weights to different selectors. By calculating these weights, we can determine which style will be applied.

**CSS Selectors****Points (Weight)**Inline Styles (e.g., style="...")1000IDs100Classes, attributes, and pseudo-classes10Elements and pseudo-elements1#### Example 1:

<h2 
 class="abc"
 id="abc"
 style="color:red;">
 CSS Specificity
`</h2>`

**CSS Selector****Specificity Score**h2(element)
1h2.abc (element + classSelector)
1+10=11h2#abc(element + idSelector)
1+100=101Inline CSS1000#### Example 2:

`<ul class=”main-menu”>`
`<li>`
 `<a href=”#”>`Item 1`</a>`
`</li>`
`</ul>`

`<div id=”main”>`
`<ul class=”main-menu”>`
`<li>`
 `<a href=”#”>`Item 1`</a>`
`</li>`
`</ul>`
`</div>`.main-menu li10 + 1 = 11.main-menu li a10 + 1 + 1 = 12ul.main-menu li a1 + 10 + 1 + 1 = 13\#main .main-menu li100 + 10 + 1 = 111\#main .main-menu li a100 + 10 + 1 + 1 = 112div#main ul.main-menu li a1 + 100 + 1 + 10 + 1 + = 113## Best Practices

- Always use classes instead of IDs because IDs have the highest weight and are difficult to [override](https://www.specbee.com/blogs/overriding-custom-services-in-drupal).
- Never use **!important** as it breaks specificity rules and cannot be overridden easily.
- Keep CSS selectors concise and follow the [BEM methodology](https://www.specbee.com/blogs/bem-block-element-modifier-with-drupal-emulsify-twig) for better maintainability.

## Final thoughts

It is important to understand CSS specificity for writing clean, maintainable stylesheets. By following the specificity hierarchy and calculating specificity scores, you can avoid unintended style conflicts and ensure your styles are applied as expected. Stick to best practices, favor classes over IDs, minimize reliance on **!important**, and keep your selectors structured. Learning and mastering specificity will help you write more efficient CSS and collaborate seamlessly on projects.

Need a stunning, user-friendly design? Our expert [UI/UX design team](https://www.specbee.com/services/ui-ux-design) ensures seamless user experiences with visually engaging, accessible, and intuitive designs. [Get in touch today!](https://www.specbee.com/contact)