Learn Responsive Web Design by Building a Piano - Step 10

HTML-CSS
1

Tell us what’s happening:
Hello, I want to ask about the instruction for the code on line 5. Why should we define the box sizing for all of the elements using " * " selector if we have defined it using “html” selector previously?
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 */

/* User Editable Region */

html {
  box-sizing: border-box;
}
*, *::before, *::after{
  box-sizing: 
}

/* 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 10

Link to the challenge:

2

The box-sizing property is not inherited by child elements. So setting it on the html element means it will only be applied to that element and not any elements inside of the html element. Using the * selector applies it to all elements.

1 Like
3

Hi!

So, if we are using * selector, then why did we need to specify *::before, *::after. Shouldn’t the * include *::before, *::after elements as well? Why are we using the pseudo-selectors in this case?

4

Can you think of a way you could test this?

5

Well, the * is to serve as a universal selector, so I think that would mean it would include pseudo-selectors.

I tried universally changing the divs’ color, for example, and the pseudo selectors stated above also had the universal color applied.

6

But did you try testing the box-sizing property?

7

No.

I guess this part is confusing me, specially understanding these two specific pseudo-selectors, and why they are not encompassed in the universal selector…

8

Try this article for an explanation.

Universal selector * and pseudo elements

1 Like
9

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