Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css

What is specificity in CSS?

Mohe Ud Din Sheikh

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

Specificity is used when styling is implemented to the same element by two or more selectors. This decides the styling to be implemented. In specificity, we use points for each styling. The styling implementation with more points wins the styling. Let's look at the illustration to understand how points are counted in CSS:

CSS points distribution

Attributes

Priority Point

Element

1

Classes

10

ID

100

Inline styling

1000

As we can see in the table above, an element has the least priority point, which is 1. Inline styling has the most priority points, which is 1000.

Therefore, if we use styling on both attributes, the inline styling will be displayed.

Code

Explanation

In the CSS (SCSS) tab:

  • Lines 1 and 2: We use red for the <body> tag, which is an element. We also make both Name and Date of birth red.

In the HTML file:

  • Lines 4 and 8: We assign a blue color by making inline styling that works within the form tag. This is because it has more priority points than the body tag. This can be seen in the output.

RELATED TAGS

css

CONTRIBUTOR

Mohe Ud Din Sheikh
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring