Thread by @Div_pradeep

⚡ All You Need to Know About CSS Specificity ⚡

A thread🧵👇🏼

❓ What is Specificity?

📌 If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

🎯 Specificity Hierarchy

⇢ Every CSS selector has its place in the specificity hierarchy.

⇢ Four categories define the specificity level of a selector:

✤ Inline styles

⤷ Example: <h1 style="color: pink;">

✤ IDs ⤷ Example: #navbar

✤ Classes, pseudo-classes, attribute selectors

⤷ Example: .test, :hover, [href]

✤ Elements and pseudo-elements

⤷ Example: h1, :before

So if:

div{background-color: blue;}
div{background-color: red;}

→ What will be the background color of this div?

→ red, right ⚡
but why red?

let me explain why:

⦿ Equal specificity: the latest rule counts.

if the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled
That's the reason for the red bg of div

⦿ ID selectors have a higher specificity than attribute selectors

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

→ Here the first rule is more specific than the other two, and will therefore be applied.

⦿ A class selector beats any number of element selectors.

→ a class selector such as .intro beats h1, p, div, etc:

Example:

.intro {background-color: yellow;}
h1 {background-color: red;}

🎯 How to Calculate Specificity?

⇢ Start at 0, add 100 for each ID value,add 10 for each class value (or pseudo-class or attribute selector),add 1 for each element selector or pseudo-element

For example:
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>

→ The specificity of A is 1 (one element selector)
→ The specificity of B is 101 (one ID reference + one element selector)
→ The specificity of C is 1000 (inline styling)

Since the third rule (C) has the highest specificity value (1000),this style declaration will be applied

End of the thread. 🧵

If you found this thread useful, please consider:

💛 Liking these tweets

🔁 Retweet the first tweet so others can see it.

👤 Following me ( @Div_pradeep ) for more content.

Thanks for reading.