2021-09-13 09:51:42 -07:00
---
id: 612e813b3ba67633222cbe54
2021-10-21 10:07:52 -07:00
title: Step 6
2021-09-13 09:51:42 -07:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-6
2021-09-13 09:51:42 -07:00
---
# --description--
Remember that a `class` attribute can have multiple values. To separate your white keys from your black keys, you'll add a second `class` value of `black--key` . Add this to your second, third, fifth, sixth, and seventh `.key` elements.
# --hints--
Your second `.key` element should also have a `class` of `black--key` .
```js
const key = document.querySelectorAll('.key')?.[1];
assert(key?.className?.includes('black--key'));
```
Your third `.key` should have `black--key` in the `class` .
```js
const third = document.querySelectorAll('.key')?.[2];
assert(third?.classList?.contains('black--key'));
```
Your fifth `.key` should have `black--key` in the `class` .
```js
const fifth = document.querySelectorAll('.key')?.[4];
assert(fifth?.classList?.contains('black--key'));
```
Your sixth `.key` should have `black--key` in the `class` .
```js
const sixth = document.querySelectorAll('.key')?.[5];
assert(sixth?.classList?.contains('black--key'));
```
Your seventh `.key` should have `black--key` in the `class` .
```js
const seventh = document.querySelectorAll('.key')?.[6];
assert(seventh?.classList?.contains('black--key'));
```
You should have five `.black--key` elements.
```js
const blackKeys = document.querySelectorAll('.black--key');
assert(blackKeys?.length === 5);
```
You should have seven `.key` elements.
```js
const keys = document.querySelectorAll('.key');
assert(keys?.length === 7);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
2022-03-14 15:54:43 +00:00
< title > Piano< / title >
2021-09-13 09:51:42 -07:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< / head >
< body >
--fcc-editable-region--
< div id = "piano" >
< div class = "keys" >
< div class = "key" > < / div >
< div class = "key" > < / div >
< div class = "key" > < / div >
< div class = "key" > < / div >
< div class = "key" > < / div >
< div class = "key" > < / div >
< div class = "key" > < / div >
< / div >
< / div >
--fcc-editable-region--
< / body >
< / html >
```
```css
```
