How to code this right

how to include a fallback with the
background set to red

  **This is what I  code but still  can't pass it**

<style>
:root {
  --red-color: red;
}
.red-box {
  background: red;
  background: var(--red-color, red);
  height: 200px;
  width:200px;
}
</style>
<div class="red-box"></div>

  **Your browser information:**

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

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

background: var(--red-color, red);

It’s not working as a CSS variable anymore after you made this change in this line. Let this line be how it was before.

1 Like

like this

but since you changed this line the tests fail

2 Likes
h2 {
color: green;
}

h2 {
color: pink;
}

h2 would be pink .
css work from bottom to top in terms of specificity.
so the bottom part has the specificity.

we are using this rule to increase browser compatibility.
so when our

--red-color: red;

is not working, it would move on to the next color.

:root{
--red-color: reeed;  // wrong color
}



.red-text {
color: red; //top-part will work

color: var(--red-color);  //bottom-part will not work
}

too confusing ?

Done thanks all
I finally get it