Learn Responsive Web Design by Building a Piano - Step 10 - Why use HTML for box-sizing declaration when you can use *?

Programming HTML-CSS
1

Tell us what’s happening:
So I know the answer is:

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

but what makes this code preferrable to simply putting this code instead:

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

Why is the html part necessary?

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>
  

     <!-- Most of the html part because it is not important to my question -->


</html>

/* file: styles.css */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}

So in summary, I know the answer but I don’t know why?

Your browser information:

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

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

Link to the challenge:

2

I would at the moment follow the lesson, There is a reason for it. I do know that if you use* tag, it overrides all.

3

I have a doubt, is there any difference between html selector and * selector?
I thought they both serve the same context.Please correct me If I am wrong

4

I have not been online in awhile.
did you finish the problem or have someone already help?

5

Hi,

I finished this lesson, and it never explained why. Do you mind telling me what you understand behind the reasoning.

Also sorry to be replying back so late, and of course thank you for reading my question

6

Hi, again.

Yes, I already had solved the answer above. I am really only seeking an explanation as to why it was written that way instead of the usual way which i’ve copied down below. This is how other people have done it for tutorials I have followed along.

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

html selector is for the html element <html>
while * is for everything (all elements) including html

8

Okay I am thinking I am beginning to get it. So then freeCodeCamp wasjust using html as an introductory to lead into an even better selector which is the everything selector *.

However, my question I am guessing is, in theory doesn’t both of these selectors work the same in either case. Since html is the first element surrounding everything then it should still function as the *.

Also, the * doesn’t capture the pseudo elements before and after so that is why they still need to be included as a selector right?

9

* is for elements only yes.
The html and * do different things.
But also in css there are multiple ways for doing the same thing.
If the code doesn’t have a html tag, then the asterisk will work. There are different applications for both. Just understand that they exist and hopefully you can remember them when you need them.

10

Okay I think this will satisfy me for now. I think If I just need to keep coding and reviewing examples eventually be able to see the case basis for the two. Thank you so much for helping to walk me through it.

11

(…) the universal selector * (…) is a simple selector (…). Although pseudo-elements (…) can appear in selector notation alongside simple selectors, pseudo-elements are completely separate from simple selectors as they represent abstractions of the DOM that are separate from actual elements, and therefore both represent different things. You cannot match a pseudo-element using a simple selector (…) [stackoverflow.com]