Learn Responsive Web Design by Building a Piano - Step 20

HTML-CSS
1

Tell us what’s happening:
Hi, I have some questions about the piano project.

  1. On line 33, why should I put .key.black–key::after selector and not just .black–key::after? Aren’t both target the same elements?
  2. I don’t really understand what’s happening when we use pseudo selector ::after. Without it, I feel like the elements perform once on the display, like below this (I changed the should-be-black-elements to be red so it won’t be biased with the black background)

.key.black–key {
background-color: red;
content: “”;
width: 32px;
height: 100px;
}

but when we use pseudo selector ::after, I feel like the elements perform twice. By being the white key and being the black key on the piano. Can anyone please tell me what’s happening? I would really appreciate that

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

/* file: styles.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;
}


/* User Editable Region */

.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
}

/* User Editable Region */

Your browser information:

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

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

Link to the challenge:

2

Ya, I think you are correct, you don’t need the extra .key at the beginning. Maybe it was intended to teach you how to target an element by multiple class names?

Yes, ::after is basically letting you add another element inside the div. It creates a “pseudo-element”.

3

Thank you so much for giving multiple answers. I was also learning from YouTube, and now I’ve managed to understand what’s happening in the code. God bless you

4

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