3.2 KiB
3.2 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd9aedf07756 | Override All Other Styles by using Important | 0 | https://scrimba.com/c/cm24rcp |
Description
style
element.
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important
Let's go all the way back to our pink-text
class declaration. Remember that our pink-text
class was overridden by subsequent class declarations, id declarations, and inline styles.
Instructions
!important
to your pink-text element's color declaration to make 100% sure that your h1
element will be pink.
An example of how to do this is:
color: red !important;
Tests
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: assert($("h1").hasClass("pink-text"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: assert($("h1").hasClass("blue-text"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: assert($("h1").attr("id") === "orange-text", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');
- text: Your <code>h1</code> element should have the inline style of <code>color: white</code>.
testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color: white</code>.');
- text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');
- text: Your <code>h1</code> element should be pink.
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", 'Your <code>h1</code> element should be pink.');
Challenge Seed
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
Solution
// solution required