#45 Specificity

easy

css

Given the provided HTML and CSS code snippets below, what would be the color of the text 'Guess my color'?

<body>
   <div class="outer">
        <p class="inner">Guess my color</p>
    </div>
</body>

p.inner {
    color: purple;
}

.outer p {
    color: red;
}

.inner {
    color: blue;
}

p {
    color: green;
}

To delve deeper, both the CSS rules assigning the colors purple and red (p.inner & .outer p)share a specificity of 0–0–0–1–1. This is because they each incorporate one Class Selector and one Type Selector.

Conversely, the rule assigning the color blue holds a specificity of 0–0–0–1–0 (.inner & p), involving only one Class Selector. Similarly, the rule setting the color green possesses a specificity of 0–0–0–0–1, utilizing solely one Type Selector.

Hence, the rules with the highest specificity values are those assigning the colors purple and red.

However, what if two CSS rules boast the same specificity value? How do we determine which one takes precedence?

This is where the Cascading in Cascading Style Sheets (CSS) becomes relevant. Essentially, the rule that appears last (at the bottom) will be applied. In this scenario, it would be the rule assigning the color red.