-2

I would like to ask what is the difference between *{} and body,html{}. It changes the view in the html and I want to have a broad knowledge about this. Thanks.

Lucifer Levi
  • 19
  • 4
  • 1
    Does this answer your question? [Difference in applying CSS to html, body, and the universal selector \*?](https://stackoverflow.com/questions/7187569/difference-in-applying-css-to-html-body-and-the-universal-selector) – DohaHelmy Jan 09 '20 at 09:22

3 Answers3

2

The wildcard (*) will apply the styling to every element found on your HTML page unless you give specific styling for that element. It overrides any possible inheritance for the set property because it is setting that default value for each individual element. If you want to change something in a section that has child elements then you will have to make that change for each child. This can be useful in a few cases (box-sizing is probably the most common use) but most of the time you will not want to use this. Depending on how heavily this is used, it can slow down your page load times.

Setting the styling with body/html allows for inheritance to still take place. Elements within the html/body will still show the styling found here if their default is set to inherit. This will still allow a closer parent to the child to override the styling. In CSS, the best option is to be more specific.

Emmy
  • 89
  • 2
1

The *{} selector (Universal selectors) matches elements of any type. (MDN).

body,html{} select body and html elements.

Consider the following example: 

* { /* Selects all elements */
  color: blue;
}

html,
body { /* Selects html and body element */
  color: green;
}
<html>

<body>Body</body>
<footer>footer</footer>

</html>
Mukyuu
  • 6,436
  • 8
  • 40
  • 59
0
*{}

is a universal selector. It will implement the styling of all the elements. If you want to do some changes with styling of the particular element then you have to override it.

body,html{}

will do the same for you. But there is one scenario. If you want to inherit the properties from the parent then body,html{} is definitely going to play this role. It is used for the inheritance of properties

Adesh Kumar
  • 952
  • 2
  • 16
  • 33