Learn Responsive Web Design by Building a Piano - Step 6

i have read a few post in forums and have found the solution, but i am not understanding this at all. how does “key black–key” translate to two classes? i tried seeing if “–” meant something in the same way it does on the command line, and i cant find anything. I’m wondering from my experience on code camp that the next step is going to have me go “key white key”, but i still dont see how the code differentiates two classes.

Your code so far

<!-- file: index.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>

<!-- User Editable Region -->

    <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>
    </div>

<!-- User Editable Region -->

  </body>
</html>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.43

Challenge: Learn Responsive Web Design by Building a Piano - Step 6

Link to the challenge:

This looks fine, but this does not:

Here the string "black--key" is not associated with anything.

i looked up the answer because there was no way to figure it out, and i dont understand it. until now we have used values for the selectors which have been separated with commas or “class” is used twice for the same element. perhaps it will make more since as the project continues.

There hasn’t been any examples of writing an attribute twice in the same tag. That’s not valid syntax.

For CSS you can target multiple selectors with a comma separated list.

For HTML you add multiple values to an attribute by putting spaces between them inside of the quotes for the value.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.