8

Know this might be a ridiculous question but what is the difference between using the * universal selector, which I know applies to every single element on the page and using just html?

For example:

* {
margin: 0;
padding: 0;
}

and

html {
margin: 0;
padding: 0;
}
Jason Hyungchul Kang
  • 163
  • 1
  • 5
  • 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) – Ivar Jan 16 '20 at 10:29

4 Answers4

8

* wildcard is for all elements in page, doesn't matter what tag, classname, id or attribute it have.

html is only for <html> element.

Examples:

* {
  color:red;
}

div {
  color: green;
}
<p>this is red</p>
<p>this is red</p>
<div>this is red but styling specifically to green</div>
<p>this is red</p>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
4

The obvious answer is that simply using the * {} wilcard selects all elements on the page (even including the html element and any other element whether they had a class, id or not).

Using the html tag as a selector simply targets the html tag.

The * wildcard is very useful in that you can also use it to target ALL children of other elements, ie:

.parent > * {
    color: red;
}

The above means that any DIRECT descendant of .parent will have a font color of red. Similary, you can do .parent * {} to target all descendants of .parent, whether they're directly below, or a few levels below.

David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
3

The Universal Selector

In CSS, you generally want to be as specific as possible, so using the universal selector is often not the best approach to take.

The Universal Selector * is going to apply the specific styles to every single element within the entire DOM, regardless of its tag. Additionally, the universal approach can interfere with default inheritance as more specific styles may still be overridden by the * style.

The HTML Selector

The html selector will only apply to the single <html> element that is present. This will still allow inheritance and specificity to function as expected (as it's merely targeting a single parent element and not all of the children individually).

Rion Williams
  • 74,820
  • 37
  • 200
  • 327
3

Applying styles to html will work like with any other element and its children: styles trickle down from the top unless the child has its own definition.

With * you set the style for each element individually, so it's applied to each first level element, second level element and so forth.

An example of a practical difference is when using the > operator, which applies styles to direct children of the element:

* > p {
    font-size: 12px;
}

Will set the font size to every p that's directly a child of any element in the DOM, regardless of how deep it is.

html > p {
    font-size: 12px;
}

Will set the font size of every p that's directly a child of the html element, which would not happen, since body and head are usually the only children of html

vcanales
  • 1,818
  • 16
  • 20