Why box-sizing on * instead of body

Question

I have seen that box-sizing: border-box will avoid width calculation issue. I have doubt that why it is on * like

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

What is problem in defined like below.

body {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

Will not apply to all child elements? why?

See here: http://stackoverflow.com/questions/11250259/why-are-css-styles-not-inherited-by-html-form-fields * makes the style apply to all elements, so one does not have to specify box-sizing: inherit. — ryanlutgen, Feb 02 '14 at 06:56

score 1 · Answer 1 · answered Feb 02 '14 at 06:57

1

It will be applied to all elements in the document instead of just the body element.

This way you don't need to add the box-sizing to all the style rules where you need the box-sizing.

Just be aware of that it may affect performance of the page using *. If you only need it for a few elements it is better to specify the box-sizing for those few instead.

answered Feb 02 '14 at 06:57

Okay, but can i define them under body element instead * which might be performance issue. – Fizer Khan Feb 02 '14 at 07:01
1

@FizerKhan it will in that case only affect the body element itself. The setting won't be inherit to child elements so you need to set all elements you need with this rule. You can for example "collect" all in a single definition: `body, #box1, #box2 {box-sizing:...;}` – Feb 02 '14 at 07:37
Ken knows what he's talking about. Go here and see for yourself. http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing – jimeast Feb 02 '14 at 07:56

score 0 · Answer 2 · answered May 25 '19 at 06:06

" * " is universal CSS selector which means it selects all individual element on an HTML page.

Example-1:
Whenever you select body it only styles up the body (Remember only body not it's child).

HTML:

<body>
  <div class="box-1">box-1</div>
  <div class="box-2">box-2</div>
</body>

CSS:

body {
  padding: 5rem;
  background-color: chocolate;
  border: 2px solid white;
}

Result: Padding, background, border applied only on body

Example-2:
Whenever you choose " * " It styles up all individual elements including body inside an HTML document.

HTML:

<body>
  <div class="box-1">box-1</div>
  <div class="box-2">box-2</div>
</body>

CSS:

body {
  padding: 5rem;
  background-color: chocolate;
  border: 2px solid white;
}

Result: Padding, background, border applied all individual elements including body

Why box-sizing on * instead of body

2 Answers2