What is CSS Specificity
In the context of web development and styling with CSS (Cascading Style Sheets), specificity refers to the set of rules that the browser uses to determine which style declarations are applied to an element.
Ex: In cases where two or more CSS rules target the same element, the selector with the highest specificity value 'wins,' and its style declaration is applied to that element.
CSS specificity is based on the selector types and their combination in a style rule. The general rule is that the more specific a selector is, the higher its specificity. Specificity is usually represented as a four-part value.
1. Inline Style
Styles applied directly to an element using the style attribute. These styles have the highest specificity.
<h1 style="color:black">
2. ID Selectors
The ID selector has higher specificity than class selectors and type selectors, and it is represented by the #id selector.
#id {color:blue;}3. Class Selectors, Attribute Selectors, and Pseudo-Classes
Styles applied based on classes (.class), attributes ([attribute]), or pseudo-classes (:hover, :focus, etc..)
/* Class selector */.class {color: red;}/* Attribute Seletor */[href] {color: red;}/* Pseudo-Classes */:hover {color: red;}
4. Type Selectors and Pseudo-Elements
These possess the lowest specificity. They are represented by element names (e.g: div, p) and pseudo-elements (e.g., ::before, ::after)
/* Elements Seletor */h1 {color: green;}/* Pseudo-Elements */::before {color: green;}
Highest specificity is inline style
Note: If you use !important it will even override inline style (Example:- color: yellow !important;)
In cases where conflicting styles exist, the browser assesses specificity to decide which style takes precedence. The presence of an inline style will take precedence over styles from alternative sources, like external stylesheets or styles declared in the document's head, due to its elevated specificity.
This specificity hierarchy serves to regulate and refine the application of styles, providing developers with precise control over how styles are implemented to elements on a webpage.
Below the examples are clearly shows how to calculate specificity values. Add those values to respective selectors when you calculate the specificity value.
Examples:
P element selector specificity value is 1
p.class selector specificity value is 1+10 = 11
p#id selector value is 1+100 = 101
<p style=" color:red; "> inline style value is 1000
The style with the highest specificity value takes precedence, and it is applied to the elements. The !important declaration, while having no specificity value, is considered the highest priority.
Equal Specificity :
If the same rule is written twice into external style sheet, then the latest rule will win.
h1 { font-size: 60px; }
h1 { font-size: 55px; }
font-size: 55px will apply to h1 element because that is latest rule
Understanding specificity is essential for creating maintainable and predictable styles in a CSS stylesheet.