The Ultimate Guide to CSS Specificity -

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">
<head>
<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">
</head>
<body>
<div class="box" id="unique-box">Hello, CSS!</div>
</body>
</html>

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).