What is Specificity?

Imagine a simple race where one player has 1010 points and the other has 100 points. So the player with the most points i.e player 1 wins the race. Similarly, If two or more CSS selectors are applied to the same element, the one with higher specificity wins.

Specificity Hierarchy

Every Selector has a certain value in the hierarchy which helps to decide the winner or the selector to be applied.

1. Inline Styles

Inline styles directly affect the tag they are written in, without the use of any selectors. The Inline style gets a specificity value of 1000, and is always given the highest priority!

2. IDs Selectors

These selectors are used to select ids with a #. The id selectors have a specificity value of 100.

3. Classes, pseudo-classes, attribute selectors

It has .classes, [attributes] and pseudo-classes such as :hover, :focus etc. These selectors have a specificity value of 10.

4. Elements and pseudo-elements

Elements: Direct reference of elements in style tag or stylesheet, example-> h1,p,a. Pseudo-elements: Styling specific part of element i.e :before,:after,::first-line,::marker. These selectors have a specificity value of 1.

How to Calculate Specificity?

Memorize how to calculate specificity!

Start at 0, add 1000 for Inline style,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.

This context doesn't mean "more than 10 ID's can add to inline styling" i.e If we have 12 ID's and 1 Inline style then the specificity would be 1,12,0,0. So Inline will always have more priority than ID's no matter the condition.

Lets calculate the specificity of these selectors

In this case we have,

• Elements - 2 (body,p)
• Class - 1 (.sith)
• ID's - 1 (#darkside)

So our specificity will be

The table demonstrates some basic examples

Examples for Specificity

1. Elements - 3 (ul,ol and li)

2. Classes - 2 (.welcome,.fast)
   Elements - 3 (body,h2 and h2)

3. The :not() sort-of-pseudo-class adds no specificity by itself, only what’s inside the parens is added to specificity value.
   ID - 1 (#footer)
   Elements - 2 (nav,li)

4. Elements - 6(ul,li,ul,li,ol,li) and pseudo-element - 1(first-letter)

5. Classes(attribute) - 1 ([rel=up])
   Element - 1 (h1)

6. The col is column of table, so its an element. The class is .selected. "||" is the column combinator and td is cell-selected, so both have no specificity.
   Classes(attribute) - 1 (.selected)
   Element - 1 (col)

Rules for Specificity

1. Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

2. Universal selector (*), combinators (+, >, ~, " ", ||) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

3. Equal specificity: the latest rule wins - If the same rule is written twice into the external style sheet, then the latest rule wins. In this code, the second class will apply since its declared the latest.

4. Specific selectors which target the element more precisely will apply to the element. In this snippet,the selector "div#a" is more specific than just "#a". So "div#a" style will apply.

5. The embedded style sheet in comparison to external stylesheet, is closer to the element to be styled. The style written in style tag will apply to the element.

6. Try to avoid using !important because it will override inline styles. Here the background color will be red because it has !important. Even though Element selector has lower priority than ID and class. The !important over writes inline CSS so it becomes top priority.

   The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.

Resources

W3schools
CSS-Tricks
CSS Specificity: Things You Should Know
MDN
codecademy