What's the difference between * and html in css selector

Question

In css, what's the difference of two selector: * and html?

*{

}

and

html{

}

Do these two work differently?

"_Do these two work differently?_" Why do you think they do or don't? What research have you done? — takendarkk, Sep 28 '17 at 18:28

caramba · Accepted Answer · 2017-09-28T18:27:45.247

1

the *{} selects all elements and all it's children elements where html{} only selects the <html> element

See example

html {
    border: solid 2px orange;
}

* {
    border: solid 2px green;
    font-size: 1.2em;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
  </li>
</ul>

<p>lorem ipsum</p>

Now see even how the font gets bigger cause its em which will take the size from the previous element.

edited Sep 28 '17 at 18:27

answered Sep 28 '17 at 18:24

caramba

@kathy all elements will be inside `` but with `*` you assign rules to every single element. See the updated answer, maybe that helps – caramba Sep 28 '17 at 18:28
1

Oh, I get it. Thank you very much! – kathy Sep 28 '17 at 18:34

1 Answers1