CSS specificity

CSS is parsed from top to bottom, i.e style that is written at the top will be overridden by the one being written below it if they have same specificity

Specifity decides which styles to apply, more specific the selectors are more priority the styles get and the one with the most specigicity is only applied while overiding the lower ones

  1. Element Selector
  2. Class selector
  3. Id selector
  4. !important keyword
  5. Inline styles

above selector are listed from least specific to most specific, they can be combined together to create rules that are more specific

e.g

#text-id {
color: pink;
}

.text{
color: black;
}

In above even though .text rule is after #text-id one, the #text-id one will be applied since it has more specificity

note : do not use !important since it is hard to override them

note: Inline styles can not be overridden by CSS

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *