25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
3.3 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 612ea4c4993aba52ab4aa32e | Step 18 | 0 | step-18 |
--description--
Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new .key.black--key::after selector. This will target the elements with the class key black--key, and select the pseudo-element after these elements in the HTML.
In the new selector, set the background-color to #1d1e22. Also set the content property to "". This will make the pseudo-elements empty.
The content property is used to set or override the content of the element. By default, the psuedo-elements created by the ::before and ::after pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the content property to an empty string "" will ensure the element is rendered to the page while still being empty.
If you would like to experiment, try removing the background-color property and setting different values for the content property, such as "♥". Remember to undo these changes when you are done so the tests pass.
--hints--
You should have a .key.black--key::after selector.
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
Your .key.black--key::after selector should have a background-color property set to #1d1e22.
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
Your .key.black--key::after selector should have a content property set to "".
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
--fcc-editable-region--
--fcc-editable-region--