Geek Answers Handbook

What is the difference between using a universal selector and html?

Know that this may be a ridiculous question, but what is the difference between using a universal selector *, which, as I know, applies to all elements of the page and uses only html?

For instance:

* { margin: 0; padding: 0; }

and

 html { margin: 0; padding: 0; }
+5
source share
4 answers

* wildcard for all elements on the page, it does not matter which tag, class name, identifier or attribute is.

html is for the <html> element only.

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>
+8
source

Universal selector

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

The universal selector * will apply specific styles to each element within the entire DOM, regardless of its tag. In addition, a generic approach can affect default inheritance, since more stylish styles can be overridden by * .

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 properly (since it just targets one parent element, not all children separately).

+2
source

Applying styles to html will work just like with any other element and its children: styles leak from above if the child does not have his own definition.

With * you set the style for each element separately, so it is applied to each element of the first level, element of the second level, etc.

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

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

Sets the font size for each p , which is directly a child of any element in the DOM, regardless of depth.

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

The font size will be set for each p , which will be directly a child of the html, which will not happen, since body and head are usually the only children of html

+2
source

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

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

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

 .parent > * { color: red; }

The foregoing means that any DIRECT descendant of .parent will have a font color of red. Similary, you can make .parent * {} to target all descendants of .parent , regardless of whether they are directly below or several levels below.

+2
source

More articles:


All Articles