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

This is a My First Div

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.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved