Files

120 lines
3.3 KiB
Markdown
Raw Permalink Normal View History

---
id: 612ea4c4993aba52ab4aa32e
title: Step 18
challengeType: 0
dashedName: 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.
```js
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`.
```js
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 `""`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
```
# --seed--
## --seed-contents--
```html
<!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>
```
```css
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--
```