---
id: 612e813b3ba67633222cbe54
title: ステップ 6
challengeType: 0
dashedName: step-6
---

# --description--

`class` 属性には複数の値が設定できることを思い出しましょう。 黒鍵と白鍵を分けるため、`black--key` を `class` の 2 つ目の値として加えます。 これを 2 番目、3 番目、5 番目、6 番目、7 番目の `.key` 要素に加えてください。

# --hints--

2 番目の `.key` 要素の `class` の値は `black--key` も含んでいる必要があります。

```js
const key = document.querySelectorAll('.key')?.[1];
assert(key?.className?.includes('black--key'));
```

3 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。

```js
const third = document.querySelectorAll('.key')?.[2];
assert(third?.classList?.contains('black--key'));
```

5 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。

```js
const fifth = document.querySelectorAll('.key')?.[4];
assert(fifth?.classList?.contains('black--key'));
```

6 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。

```js
const sixth = document.querySelectorAll('.key')?.[5];
assert(sixth?.classList?.contains('black--key'));
```

7 番目の `.key` 要素は `class` の値の中に `black--key` を含んでいる必要があります。

```js
const seventh = document.querySelectorAll('.key')?.[6];
assert(seventh?.classList?.contains('black--key'));
```

`.black--key` 要素が 5 つ必要です。

```js
const blackKeys = document.querySelectorAll('.black--key');
assert(blackKeys?.length === 5);
```

`.key` 要素が 7 つ必要です。

```js
const keys = document.querySelectorAll('.key');
assert(keys?.length === 7);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <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

```
