search

jsartisan / frontend-challenges

FrontendChallenges is a collection of frontend interview questions and answers. It is designed to help you prepare for frontend interviews. It's free and open source.
https://frontend-challenges.com
21 stars 4 forks source link

Specificity #45

Closed jsartisan closed 4 months ago

jsartisan commented 4 months ago

Info

difficulty: easy
title: Specificity
tags: css
type: quiz

Question

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;
}

Solution

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.

github-actions[bot] commented 4 months ago

46 - Pull Request updated.