CSS Specificity

Mama always told me to go out of my comfort zone, here I am liking CSS.
Hence, our goal is to get better with CSS because we love it so much. 💖

What is CSS specificity?

👉An algorithm used by browsers

👉Will calculate the “importance” of a CSS rule to determine what rule will be applied to an element

Highest specificity → Lowest specificity

TLDR;

Imagine we can assign a “weight” to each rule.
The rule with the most weight takes the highest priority.
Those rules are listed in a decreasing order.
Mind you that:
1,0,0,0 > 0,1,0,0 > 0,0,1,0 > 0,0,0,1 as 1000 > 100 > 10 > 1

Please assume that the CSS classes and id’s are declared properly in a separate CSS file

👉 Inline styles ( 1, 0 , 0 , 0 )

<div style={{background: 'red'}} id="pink" class="blue"/>
// background will be red

👉 id ( 0 , 1 , 0 , 0 )

<div id="pink" class="blue"/>
// background will be pink

👉 Classes, Pseudo-classes and Attributes ( 0 , 0 , 1 , 0 )

• Class: class selectors with the following syntax .someClass

<div class="blue"/>
// background will be blue
<style>
 .blue {
   background: blue
 }
</style>

• Attributes: provide extra info about an element, usually in a key-value pair format

a[target] { // will affect all anchor tags that have a target
  background: yellow;
}
input[type="radio"] { // will affect all radio buttons
 background: pink;
}

• Pseudo classes: defines a special state of an element
  Ex: :hover, :required , :first-child , :nth-child(n) …

📝Note:
What if we define a class selector, a pseudo class and and an attribute at the same time? Which one will take priority as they all have the
weight of ( 0 , 0 , 1 , 0 )?

Attribute will always take priority → pseudo classes → classes
Hence, those two links will have a red background!

In this case, the first link will be pink, and the last will be blue.

👉 Elements and Pseudo-elements ( 0 , 0 , 0 , 1 )

• Element: <p>, <div>, <section>….
• Pseudo-Element: style a specified part of an element (before or after the content, first line of content, ect.)

👉 Other selectors

All other specific selector such as:*, +, >, ~ don’t add any value to the weight of specificity but they do their job by selecting the proper element :)

If we were to calculate the weight for each of these:

• <div style={{…}}/> → 1 , 0 , 0 , 0
• #myId → 0 , 1 , 0 , 0
• .myClass → 0 , 0 , 1 , 0
• p → 0 , 0 , 0 , 1
• p a→ 0, 0, 0, 2 // this style will apply to all <a> that are children of <p>
As we have two elements: ( 0 , 0 , 0 , 1 ) + ( 0 , 0 , 0 , 1 )

🤗 You guessed it: div p a → 0 , 0 , 0 , 3
Mind you that 0,0,0,3 > 0,0,0,2 as 3 > 2

📝Note: if you want all <div>, <p> and <a> tags to have the same style you would have to separate them with a comma: div , p , a

• a.foo→ 0 , 0 , 1 , 1
  As we have one class and one element: ( 0 , 0 , 1 , 0 ) + ( 0 , 0 , 0 , 1 )
• .foo .bar → 0 , 0 , 2 , 0
  As we have two classes: ( 0 , 0 , 1 , 0 ) + ( 0 , 0 , 1 , 0 )

🤗 You guessed it: .foo .bar .moo → 0 , 0 , 3 , 0
Mind you that 0,0,3,0 > 0,0,2,0 as 30 > 20

• p a.foo → 0 , 0 , 1 , 2
  As we have two elements and one class:
  ( 0 , 0 , 0 , 1) + ( 0 , 0 , 0 , 1 ) + ( 0 , 0 , 1 , 0 )
• section.foo section.bar → 0 , 0 , 2 , 2
  As we have two elements and two classes: ( 0 , 0 , 1 , 1 ) + ( 0 , 0 , 1 , 1 )
• div#foo → 0 , 1 , 0 , 1
  As we have one id and one element: ( 0 , 1 , 0 , 0 ) + ( 0 , 0 , 0 ,1 )

Last few notes

!important → 💣💣💣

Its !important to avoid the usage of this flag as it gets very confusing. Its mainly used to override third party libraries and it is indeed !important to leave a comment explaining the purpose.

End

CSS can get tricky sometimes, but you are aware of how the algorithm works, it might help with debugging!

Until next time :)

-Lara Mo