Class priority?

Tell us what’s happening:
Describe your issue in detail here.

Hello, I am brand new to any sort of coding and am just figuring things out, this question has nothing to do with the challenge itself but with the .box class. I added background-color: green just to see what would happen, expecting all the elements to turn green, but none of them did, is there a reason it gives priority to the other classes background colors first?

  **Your code so far**

<style>
.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  background-color: green;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  margin: 20px 40px 20px 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36

Challenge: Use Clockwise Notation to Specify the Margin of an Element

Link to the challenge:

Here, the background color of your first h5 element inside the div element is turning into green first because of your .box class. And later on the background color of your h5 is getting replaced with the background color of .red-box which is crimson .

<h5 class="box red-box">padding</h5>

That isn’t specificity, it is cascade. If you move the .box selector to the bottom of the CSS it will be applied as expected. Specificity is the weight of the selector.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.