The Ultimate Guide to CSS Specificity

Specificity is the set of rules that the browser uses to decide which style declarations will be applied to an element. It is a measure of how specific a style rule is in targeting an element. Specificity is calculated based on a combination of selectors used in a CSS rule, and the more specific a rule is, the higher its specificity.

In the below PDF we discuss about  CSS Specificity in detail in simple language, Hope this will help in better understanding.


How CSS Specificity Works?

It’s crucial to understand how specificity works to avoid unexpected styling results and to write more maintainable code. Let’s explore CSS specificity through examples:

Example 1: Basic Selectors

html  code

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Specificity Example</title>
<link rel="stylesheet" href="styles.css">
<div class="box" id="unique-box">Hello, CSS!</div>

css code

/* styles.css */

/* Specificity: 0, 0, 1, 0 */
.box {
color: blue;
/* Specificity: 0, 1, 0, 0 */
#unique-box {
color: red;

In this example, the text inside the div with the class “box” will be blue, while the text inside the div with the ID “unique-box” will be red. This is because the ID selector has higher specificity than the class selector.

How to Calculate CSS Specificity:

Calculating CSS specificity involves assigning a specificity value to each selector in a style rule and then comparing those values to determine which style rules take precedence. The specificity is represented by a four-part value (a, b, c, d), where:

  • a is the number of ID selectors
  • b is the number of class selectors, attribute selectors, and pseudo-classes
  • c is the number of type selectors and pseudo-elements
  • d is the number of inline stylesHere’s a step-by-step guide on how to calculate CSS specificity:

1. Count the ID Selectors (a):
Look at the selector and count the number of ID selectors (e.g., #elementID).

2. Count the Class Selectors, Attribute Selectors, and Pseudo-classes (b):
Count the number of class selectors (e.g., .classname), attribute selectors (e.g., [type=”text”]), and pseudo-classes (e.g., :hover).

3. Count the Type Selectors and Pseudo-elements (c):
Count the number of type selectors (e.g., div, p) and pseudo-elements (e.g., ::before).

4. Count the Inline Styles (d):
Count the number of inline styles (e.g., <div style=”color: red;”>).

5. Build the Specificity Value:
Combine the counts obtained in steps 1 to 4 to form the specificity value (a, b, c, d).

For example, if you have a selector like #elementID .classname, the specificity would be (1, 1, 0, 0) because there is one ID selector and one class selector.

6. Compare Specificity Values:
When comparing two specificity values, start by comparing the values in the a, b, c, and d positions from left to right. The selector with the higher value in the leftmost position wins. If there is a tie, move to the next position, and so on.

For example, (1, 0, 0, 0) has higher specificity than (0, 3, 0, 0).

Related Question

CSS specificity is a set of rules that determines which style rules are applied to an element when multiple conflicting rules exist. It helps browsers decide which styles to prioritize when styling HTML elements.

Specificity is calculated based on the combination of selectors used in a style rule. The more specific a selector is, the higher its specificity. Inline styles have the highest specificity, followed by IDs, classes, and element selectors.

Understanding CSS specificity is crucial for web developers because it helps in resolving conflicts when multiple style rules target the same element. It ensures that the intended styles are applied and prevents unexpected styling behavior.

To increase specificity, you can use more specific selectors, such as combining IDs, classes, or element selectors. Additionally, using !important in a style rule or inline styles further increases specificity.

Specificity can be calculated by assigning weights to different parts of a selector. Count the number of IDs, classes, and elements in the selector, and then concatenate the values to create a specificity score. The higher the score, the higher the specificity.


The Ultimate Guide to CSS

A Complete Guide to CSS

A Complete Guide to CSS

The Ultimate Guide to CSS

CSS Background The background property

CSS Units – Explained with

CSS Website Layouts CSS layouts

Leave a Comment

Your email address will not be published. Required fields are marked *

// Sticky ads