Not another CSS specificity article!

CSS is very easy to learn as it has a powerful, common sense, semantic syntax that many will find intuitive to follow. This is also the essence of many a frustration for beginner to intermediate users and I bet pesos to Ethereums also vexes advanced users at times. The code to write is often so clear that when it does not work, web dreams can be conflagrated. Instead of slinging together a site that pops, gleams, and is bedazzled by using a few selectors and properties, one is making fingertip shaped dents on the desk space beneath their keyboard trying to make font heavier and failing sadly. This sad face is often because one is a victim of the sneaky and snarky rules of CSS Specificity.

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Carelessly put, when a browser displays an HTML document it combines the HTML elements and their contents with the styles from the CSS page to form a Document Object Model (DOM), a type of tree, and this DOM tree is what is visually represented on the browser . Herein is the root of many CSS boggles. Based on meanness (not really, it’s an algorithm that follows a set pattern with rules), the browser works out which rules should be applied in the DOM, and attaches style to them.

One can view the rules as applying a value or rank to a style and the styling with the highest value or rank is attached to an element and so displayed.

An example of this ranking can be observed in the following code:

HTML
<p class="pink" id="goldenrod" >I will be goldenrod</p>
<p class="goldenrod" id="goldenrod" style="color: pink;"> I will be   pink</p>
CSS
* {color: pink;}
#goldenrod {color: goldenrod;}
p {color: pink;}
.pink {color: pink;}

In the first paragraph element, despite the all(*), element, and class selectors defining the style as “color: pink”, the element will be goldenrod because id selectors have a higher specificity value. In the second paragraph element, the id and class selectors do not define the style because inline style definitions have a higher specificity value than ids.

Here is a table with the common selectors and specificity value representations.

Add the combined selector values and the higher value is displayed

Some other important rules to take note of are:

1. In the case of equal specificity, the latest rule will win.

HTML
<p>I will be goldenrod</P
p {color: pink;}
p {color: goldenrod;}

2. Internal styling will be displayed if all other factors are equal.

HTML 
<style> p {color: pink;} </style>
<p>I will be pink</p>
CSS
p {color: goldenrod;}

3. A class selector will beat any number of element selectors. An id will beat any number of class selectors or class/element selectors. Inline styling will beat everything almost always.

HTML
<style> p {color: orange;} </style>
<p class="pink" id="goldenrod" >I will be goldenrod</p>
<p class="goldenrod" id="goldenrod" style="color: pink;"> I will be   pink</p>
<p class="red">I will be orange</p>
CSS
* {color: pink;}
#goldenrod {color: goldenrod;}
p {color: pink;}
.pink {color: pink;}
.red {color: red;}

In difficulties getting the desired styling, escalating specificity rules until the desired styling is rendered can be a way to solve the problem. If element selector styling is not working, targeting the parent and element is more specific, a class selector more so, then an id, then an inline styling. If all has failed and hopelessness has descended over Midgaurd, the Odinson option of CSS in the !important tag. Adding !important in your CSS styling will override almost all CSS styling, including inline styles.

HTML
<style> p {color: orange;} </style>
<p class="pink" id="goldenrod" >I will be yellow</p>
<p class="goldenrod" id="goldenrod" style="color: pink;"> I will be yellow</p>
<p class="red">I will be yellow</p>
CSS
* {color: pink;}
#goldenrod {color: goldenrod;}
p {color: pink;}
.pink {color: pink;}
.red {color: red;}
p {color: yellow !important;}

I said override almost all

Further resources:

Specificity - CSS: Cascading Style Sheets | MDN

CSS Specificity

CSS Selectors Reference

Override Inline Styles with CSS | CSS-Tricks