Background-color in nested divs?

The code I have a question about is here: https://codepen.io/ckujawa/pen/dKGaod/. Specifically, I am wondering if anyone can tell me why I need to add the !important rule to the background-color of .merch-header to make it render as I want it to. If I don’t, the background-color of that div ends up being ignored (Chrome’s web dev tools simply show it with as struck-through). I’m glad it works like this…I’m just trying to understand why I have to add !important.

Thank you!

Because it is not as specific as your other rule.

.shopping div {
    background-color: #dbc1ac;
    border: 2px solid #38220f;
}

This code targets a classname and then an element inside that class while your code:

.merch-header {
    text-align: center;
    color: #ece0d1;
    background-color: #38220f;
    margin: 0;
}

is only targeting a class instead of a class and an element so it is a weaker rule. You may think that it is a stronger rule because you are targeting the actual classname instead of just “div”, but CSS is not looking at nested items but at the strongest rules. What you probably want to do is this:

.shopping .merch-header {
  text-align: center;
  color: $mostly-cream;
  background-color: $black !important;
  margin: 0;
}

which targets the specific type of div under shopping.