3.4 KiB
3.4 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd8aedf06756 | Override Class Declarations by Styling ID Attributes | 0 | https://scrimba.com/c/cRkpDhB |
Description
blue-text
before pink-text
in our h1
element's classes, it would still look at the declaration order and not the order of their use!
But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
Let's override your pink-text
and blue-text
classes, and make your h1
element orange, by giving the h1
element an id and then styling that id.
Instructions
h1
element the id
attribute of orange-text
. Remember, id styles look like this:
<h1 id="orange-text">
Leave the blue-text
and pink-text
classes on your h1
element.
Create a CSS declaration for your orange-text
id in your style
element. Here's an example of what this looks like:
#brown-text {Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
color: brown;
}
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: Give your <code>h1</code> element the id of <code>orange-text</code>.
testString: assert($("h1").attr("id") === "orange-text", 'Give your <code>h1</code> element the id of <code>orange-text</code>.');
- text: There should be only one <code>h1</code> element.
testString: assert(($("h1").length === 1), 'There should be only one <code>h1</code> element.');
- text: Create a CSS declaration for your <code>orange-text</code> id
testString: assert(code.match(/#orange-text\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id');
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
testString: assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.');
- text: Your <code>h1</code> element should be orange.
testString: assert($("h1").css("color") === "rgb(255, 165, 0)", 'Your <code>h1</code> element should be orange.');
Challenge Seed
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
Solution
// solution required