The universal selector matches any type of element and, therefore, selects every single element on a web page.

<html>
<head>
<style>* {border: 1px solid black;box-sizing: border-box;}*.box { background: #44b3c2; }</style></head><body><div class="box"></div><p><span></span></p><ul><li><span></span></li><li><span></span></li></ul></body></html>
]]>

The universal selector, which uses the * symbol, is a great way to change the box-sizing property of every individual element on a web page.

Psst: whenever we've selected elements with simple selectors, we've implied the * symbol.

While selecting the body section has a very similar effect, the universal selector doesn't rely on inheritance.