CSS Specificity with calculating selector weight

TL;DR CSS specificity determines which CSS rules apply to an element when multiple rules match. It's calculated by assigning weights to different types of selectors: inline styles (1000 points), IDs (100 points), classes and attributes (10 points), and elements (1 point). The higher the weight, the more likely a selector will be applied.

Mastering CSS Specificity: A Comprehensive Guide with Calculating Selector Weight

As a fullstack developer, you're likely no stranger to the world of CSS. However, even experienced developers can get tripped up by the complexities of CSS specificity. In this article, we'll delve into the world of CSS specificity, exploring what it is, how it works, and providing actionable examples and tricks to help you master it.

What is CSS Specificity?

CSS specificity refers to the process by which browsers determine which CSS rules to apply to an element when multiple rules match. It's a set of rules that helps browsers decide which styles to use when there are conflicting declarations. In essence, CSS specificity is a way to resolve conflicts between different CSS selectors.

Calculating Selector Weight

To understand CSS specificity, you need to know how to calculate selector weight. The weight of a selector determines its importance in the cascade. The more specific a selector is, the higher its weight, and therefore, the more likely it is to be applied by the browser.

The CSS specification defines four categories for calculating selector weight:

1. Inline styles (1000 points)
2. IDs (100 points)
3. Classes, attributes, and pseudo-classes (10 points)
4. Elements and pseudo-elements (1 point)

Let's break down each category to understand how they contribute to the overall selector weight.

Inline Styles

Inline styles are the most specific type of selector. When you apply a style directly to an element using the style attribute, it overrides any other CSS rule that may match the same element. This is because inline styles have a weight of 1000 points.

<!-- Inline style with a weight of 1000 points -->
<div style="color: red;">This text will be red.</div>

IDs

IDs are the next most specific type of selector. They have a weight of 100 points, which means they can override any class, attribute, or pseudo-class selector.

/* ID selector with a weight of 100 points */
#header {
  background-color: #333;
}

Classes, Attributes, and Pseudo-classes

Classes, attributes, and pseudo-classes have a weight of 10 points. They are less specific than IDs but more specific than elements.

/* Class selector with a weight of 10 points */
.header {
  background-color: #333;
}

/* Attribute selector with a weight of 10 points */
[aria-label="header"] {
  background-color: #333;
}

/* Pseudo-class selector with a weight of 10 points */
:hover {
  color: red;
}

Elements and Pseudo-elements

Elements and pseudo-elements have the lowest weight, at just 1 point. They are the least specific type of selector.

/* Element selector with a weight of 1 point */
div {
  background-color: #333;
}

/* Pseudo-element selector with a weight of 1 point */
::before {
  content: "";
}

How to Calculate Selector Weight

Now that you understand the different categories, let's see how to calculate the overall selector weight.

When multiple selectors are combined, their weights are added together. For example:

/* Combined selector with a weight of 111 points */
#header div {
  background-color: #333;
}

In this example, the #header ID has a weight of 100 points, and the div element has a weight of 1 point. The combined weight is 101 points.

CSS Specificity Examples

Let's see some examples to illustrate how CSS specificity works in practice:

<!-- HTML structure -->
<div id="header" class="container">
  <h1>Welcome to our website</h1>
</div>

/* Example 1: ID selector vs. Class selector */
#header {
  background-color: #333; /* weight: 100 points */
}

.container {
  background-color: #f0f0f0; /* weight: 10 points */
}

In this example, the #header ID selector has a higher weight than the .container class selector. Therefore, the browser will apply the styles from the #header rule.

/* Example 2: Class selector vs. Element selector */
.container {
  background-color: #f0f0f0; /* weight: 10 points */
}

div {
  background-color: #333; /* weight: 1 point */
}

In this example, the .container class selector has a higher weight than the div element selector. Therefore, the browser will apply the styles from the .container rule.

Tips and Tricks

Here are some actionable tips to help you master CSS specificity:

• Use IDs sparingly: IDs have high specificity, so use them only when necessary.
• Prefer classes over elements: Classes are more flexible than elements and can be reused across your application.
• Avoid inline styles: Inline styles override all other CSS rules, making it harder to maintain your codebase.
• Keep your selectors simple: Simple selectors are easier to read and understand.

Conclusion

CSS specificity is a fundamental concept in web development. By understanding how selector weight is calculated and applying the tips and tricks outlined above, you'll become more proficient in writing efficient and maintainable CSS code. Remember to keep your selectors simple, avoid inline styles, and use IDs sparingly. Happy coding!