CSS Specificity

When more than one conflicting set of CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore will be applied to the element.

Specificity Hierarchy Selector Types

• Type Selectors: Like (h1, h2) | pseudo-elements (::before)
• Class Selectors: Like (.exp), attributes selectors (type="radio"), and pseudo-classes (:hover)
• ID Selectors: Like (#exp)
• Universal Selector (*), combinators (+, >, ~, ' ', ||)

Specificity Rules

• Inline CSS: The inline CSS has highest priority and overrides all other selectors; it is directly attached to the element to be styled.
• Internal CSS: The internal CSS is overridden by inline CSS; it is 2nd faster priority and overrides CSS.
• External CSS: The external CSS stylesheet has lowest precedence and is overridden by Internal and inline CSS.

Specificity Internal CSS Rules

If the same rule is written twice into the internal style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied:

Example Of Specificity Internal CSS

h3 {
     background-color: red;
     color: #fff;
  }
h3 {
     background-color: green;
     color: #fff;
  }

Output

This is Heading H3

2nd Example of ID Selectors

The ID selectors have a higher specificity than attribute selectors:

Output

3rd Example of Class Selectors

The Class selectors have a higher specificity than normal attribute selectors; you can see the below-mentioned example h3 CSS property with Claas selector and the second one CSS property write directly for h3:

Output

This is a h3 Heading.