CSS Specificity - Detailed Overview

Introduction to CSS Specificity

CSS specificity determines which styles are applied by the browser when multiple rules could apply to the same element. Specificity is calculated based on the types of selectors used in the rules.

Specificity Hierarchy

The hierarchy of CSS specificity is as follows (from lowest to highest):

• Type selectors (e.g., div, p)
• Class selectors, attributes selectors, and pseudo-classes (e.g., .class, [type="text"], :hover)
• ID selectors (e.g., #id)
• Inline styles (e.g., style="color: red;")

Examples of CSS Specificity

Below are examples illustrating different levels of CSS specificity:

/* General styles */
p {
    color: black;
}

/* Class selector with specificity */
.class-specific {
    color: red;
}

/* ID selector with higher specificity */
#id-specific {
    color: blue;
}

/* Inline styles with highest specificity */
.inline-example {
    color: green;
}