Freecodecamp: HTML & CSS Waypoint: "prioritize-one-style-over-another" can be fooled

Created on 25 Jan 2016  路  4Comments  路  Source: freeCodeCamp/freeCodeCamp

When I couldn't figure out what to do, I went in and changed the body color to pink and hit submit to see if that was the right answer. It gave me the "congrats" and moved me forward because it met both criteria, but then upon seeing the code in the next waypoint I realized that wasn't right and I had just "fooled" the test. Here's the code I entered:

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: pink;
  }
  pink-text {
     color: pink;
  }
</style>

Most helpful comment

This also fools the tests

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: pink;
    .pink-text {
    color: pink;
  }
  }

</style>
<h1 class="pink-text">Hello World!</h1>

Without color: pink; on line 5 it won't color the header. This even passes the new test

Your <style> should have a pink-text CSS class with its color set to pink.

even though the class pink-text isn't doing anything since its inside the body style.

All 4 comments

@swimbo please, post the link to the challenge and your full code too, thanks. I'm not able to pass the first test with your code.

@bugron I believe his code is something like this:

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

Notice that pink-text is improperly declared in the <style> and thus doesn't do anything. To make the h1 pink, he changed the color within body selector (which should have remained green to emphasize that class styles override the body element styles).

Perhaps this needs one more test to check that there should be a class selector in the <style> that references the pink-text class.

@alistermada yes, it is improperly declared. I've passed tests with your code. I think this is because tests don't check if pink-text is declared properly, they only check if h1 has pink-text class and it's text color is pink.

This also fools the tests

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: pink;
    .pink-text {
    color: pink;
  }
  }

</style>
<h1 class="pink-text">Hello World!</h1>

Without color: pink; on line 5 it won't color the header. This even passes the new test

Your <style> should have a pink-text CSS class with its color set to pink.

even though the class pink-text isn't doing anything since its inside the body style.

Was this page helpful?
0 / 5 - 0 ratings