12

what is the difference between 

body{
  background: #4b4b4b;
}

and 

*{
    background: #4b4b4b;
 }

which has higher priority?

user544079
  • 16,109
  • 42
  • 115
  • 171
  • You might want to go through this http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful – Jan Zyka May 04 '11 at 22:00
  • I also feel using * is evil. Even if it does its job properly. :( – Mon Noval May 05 '11 at 09:32
  • 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

5 Answers5

12

The body selector has higher priority, but the * selector applies more broadly, so in <body>foo<p>bar</p></body> the body selector will determine the background of the text foo, but the * selector will determine the background of the <p> element.

Note, also that many browsers create an element around the <body> that includes its margins and scrollbars, so the * selector may also determine the color of that region.

Mike Samuel
  • 118,113
  • 30
  • 216
  • 245
  • Can we use body and * in same design or is it suggestable to use only one like either it has to be body or *. – Gladwin James Feb 11 '21 at 09:23
  • @GladwinJames, If you want to match one thing then `body` is preferable to `*`. This matters when style properties multiply as in `
    a
    b
    c
    d
    e`. Also be aware of [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) which is a good alternative to `body`.
     – Mike Samuel Feb 12 '21 at 19:16
9

body selects the body element, * selects all elements.

Out of those two, body has higher priority.

Matti Virkkunen
  • 63,558
  • 9
  • 127
  • 159
9

What is the difference?

body is an element selector (selects an element body) while * is a universal selector (selects all elements).

Which has higher specificity (the proper term for priority)?

When calculating specificity of a selector (Think of it as a binary number):

  • If it's an inline style declaration you add 1000.
  • For every id attribute value you add 0100.
  • For every class attribute value, attribute selection or pseudo-class you add 0010
  • For every element and pseudo element you add 0001.
  • For every combinator or universal selector you add 0000.
  • If it's an inherited declartion it has no specificity.

Thus the specificity of body is 0001 and the specificity of * is 0000. body wins.

melhosseiny
  • 9,992
  • 6
  • 31
  • 48
4

Some HTML elements have a default background color, such as <input>, <select>, etc. Using * will affect them as well instead of only the <body> and all children with a transparent background.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • `*{ background: #4b4b4b; }` will not only affect elements with a default background, it'll simpy affect all elements that can have a background color – Mark May 04 '11 at 22:02
  • @Mark: how exactly did I said otherwise? – BalusC May 04 '11 at 22:02
  • thought you were implying it'll only affect the elements that have a default background color (like the form elements you mentioned) but offcourse it'll also color the background of for example (a normally transparent) div element – Mark May 04 '11 at 22:04
  • @Mark: uh yes, maybe you missed the "instead of" part? – BalusC May 04 '11 at 23:04
0
  1. do not use * universal selector and it is not a standard way
  2. body background applies only full body background and * background means apply same background to all element inside body
  3. now a days in css3 uses reset css and main style css separately
Web Designer cum Promoter
  • 1,334
  • 14
  • 26