Prev Next

CSS Specificity

CSS specificity determines which style rule is applied when multiple rules match the same element. It is calculated based on the selectors used in the rule and follows a hierarchy of inline styles, IDs, classes, and element selectors.

Key Topics

Specificity Basics

Specificity is calculated as a score, with different types of selectors contributing different values. The order of priority is:

  • Inline styles: 1000 points
  • ID selectors: 100 points
  • Class, attribute, and pseudo-class selectors: 10 points
  • Element and pseudo-element selectors: 1 point
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Specificity Basics</title>
    <style>
        div {
            color: blue; /* Element selector (1 point) */
        }
        .class {
            color: green; /* Class selector (10 points) */
        }
        #id {
            color: red; /* ID selector (100 points) */
        }
    </style>
</head>
<body>
    <div id="id" class="class">This text will be red</div>
</body>
</html>

Explanation: The ID selector takes precedence over class and element selectors due to its higher specificity score.

Specificity Hierarchy

When multiple selectors apply to the same element, the one with higher specificity takes precedence. In case of a tie, the rule defined last in the CSS file is applied.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Specificity Hierarchy</title>
    <style>
        div {
            color: blue; /* Lower specificity */
        }
        .highlight {
            color: green; /* Higher specificity */
        }
    </style>
</head>
<body>
    <div class="highlight">This text will be green</div>
</body>
</html>

Explanation: The class selector .highlight overrides the element selector due to higher specificity.

Inline vs. External Styles

Inline styles always have the highest specificity and will override styles defined in external or internal stylesheets.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline vs External Styles</title>
    <style>
        div {
            color: blue; /* External style */
        }
    </style>
</head>
<body>
    <div style="color: red;">This text will be red</div>
</body>
</html>

Explanation: The inline style has the highest specificity, so the text color is red, overriding the external style.

Combined Example

This example demonstrates how different specificity levels interact:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Specificity Example</title>
    <style>
        div {
            color: blue; /* Element selector */
        }
        .highlight {
            color: green; /* Class selector */
        }
        #important {
            color: red; /* ID selector */
        }
    </style>
</head>
<body>
    <div id="important" class="highlight">This text will be red</div>
</body>
</html>

Explanation: The ID selector overrides the class and element selectors due to its higher specificity score.

Key Takeaways

  • Specificity Levels: Inline styles > ID selectors > Class/Attribute/Pseudo-class selectors > Element selectors.
  • Tie-breaking: When specificity is tied, the rule defined last takes precedence.
  • Use specificity wisely: Avoid overusing high-specificity selectors to maintain flexibility.
Prev Next