question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fix Test in Override Styles Using Important

See original GitHub issue

Challenge Override All Other Styles by using Important has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:


<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text{
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

I can't go to the next challenge, because I haven't completed this point:

> Your pink-text class declaration should have the !important keyword to override all other declarations.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
varjmescommented, May 8, 2016

I’m going to tweet about this tomorrow from the twitter.com/yourfirstpr account! Thanks for this issue! 😃

1reaction
erictleungcommented, May 8, 2016

@arthurver thanks for the issue. It appears that the regex for the test needs to allow spaces between .pink-text and the bracket. The beginning of the assert test in this line is currently

"assert(code.match(/\\.pink-text\\s+\\{\\s+color: ...

But it should be changed to:

"assert(code.match(/\\.pink-text\\s*?\\{\\s+color: ...

Next time if you get stuck with a challenge, please ask questions to the Help Room first to confirm this is a bug with the site or if there is a problem with your code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

When Using !important is The Right Choice | CSS-Tricks
Using !important in your CSS usually means you're narcissistic & selfish or lazy ... The !important rule overrides that particular property.
Read more >
CSS !important: Don't Use It. Do This Instead - UX Engineer
The source order rule is our “weakest” option to override styles. If you're stuck trying to understand why you're styles aren't being applied, ......
Read more >
Override All Other Styles by using Important - Snakify
Override All Other Styles by using Important. Yay! We just proved that in-line styles will override all the CSS declarations in your style...
Read more >
How to Override CSS Styles - W3docs
When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the...
Read more >
CSS !important Property - W3Schools
The only way to override an !important rule is to include another !important rule on a declaration with the same (or higher) specificity...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found