Prioritize One Style Over Another - incorrect code in solution?

Prioritize One Style Over Another - incorrect code in solution?


Tell us what’s happening:

Isn’t the solution incorrect? In the solution the style color is set to pink, shouldn’t it be green to show that that classes to individual elements take priority over general styles - that being the point of the lesson?

Also, ‘Run tests’ will not complete; what is wrong with my code?

Here is the solution:

Your code so far

  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  .pink-text{color: pink;}
<h1 class="pink-text"> Hello World!</h1>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:


You need to close your body selector by “}”


Selector and class definitions have the following syntax:

h1 {
  property1: value;
  property2: value;

.someClass {
  property1: value;
  property2: value;

Your current code has the pink-text class definition nested inside the body selector definition.


The point of the lesson is that if you define property (text color in this example) to an element such as the body and then create a class which defines the same property with a different value AND apply that class to a specific element in the body element, then the class definition for the property will override the original definition. That is why the h2 element gets pink text instead of green which was originally defined for the text color in the body element.


Thank you. Can you check the solution given also. In the solution - the body and class colors are both pink. Shouldn’t the body color be green and the class pink? freeCodeCamp Challenge Guide: Prioritize One Style Over Another


You are correct that the body should show green (as the original challenge code does). I looked at the guide and someone changed it from green to pink on April 10th. I contacted them to ask why?