CSS Specificity

CSS stands for Cascading Style Sheet. This means that the styles flow through the entire application and are applied to elements with the matching identifiers.

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.  The more specific a CSS style is, the more likelier that it will be applied. It means, when two or more styles target a particular element, the style with the highest specificity is the one that gets applied.

CSS Specificity explained by MDN

According to MDN, Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied

It means,  if two CSS selectors apply to the same element, the one with higher specificity is used.

CSS Specificity Hierarchy

1 – Inline Styles
Inline styles are directly attached to the element with a style tag. For example:

<h3 style='color: red'>Hello World</h3>

Even though inline styling is not considered the best practice, it ranks the highest in hierarchy of styles.

2 – ID Selectors
ID selectors are the next in priority list. These selectors target an element using the element’s ID. ID’s are unique. An element can have just one ID and that ID can be used only once within an HTML document.

<h3 id='sub-title'>Hello World</h3>

They can be overridden by inline styles.

3 – Classes, Attributes, and Pseudo Classes
ID selectors are followed by classes, attributes and pseudo class selectors. This includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

4 – Elements and Pseudo Elements
This category includes element names and pseudo-elements, such as h1, div, :before and :after.