How to calculate the Specificity value in CSS ?

Specificity in CSS determines which styles are applied to an element when conflicting styles exist. Specificity is calculated based on the selectors used to target elements.

Specificity

The table below illustrates CSS Selector type and specificity along with their descriptions.

CSS Selector Type	Specificity	Description
Inline Styles	1,0,0,0	Inline styles have the highest specificity. They are styles applied directly to an element’s style attribute.
ID Selectors	0,1,0,0	Selectors containing ID selectors have higher specificity than class selectors or element selectors. Represented as #id.
Class, Attribute, Pseudo-Class Selectors	0,0,1,0	Selectors containing class selectors, attribute selectors, or pseudo-classes have higher specificity than element selectors. Represented as .class, [attribute], or :pseudo-class.
Element, Pseudo-Element Selectors	0,0,0,1	Selectors containing element selectors or pseudo-elements have the lowest specificity. Represented as element or ::pseudo-element.
Combining Selectors	Varies	Specificity values are combined for multiple selectors in a selector chain.
!important Rule	Highest	The !important rule increases the specificity of a declaration, making it override other declarations, regardless of their specificity.

Note: When comparing conflicting styles, the style with the highest specificity is applied. If specificities are equal, the style defined later in the stylesheet takes precedence.