What is the use of asterisk (*) selector in CSS ?

The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.
For example:

* {
    property : value;
 }

While selecting elements, if we use just asterisk (*), then all the elements of the HTML page gets selected irrespective of the parent-child relation. If we use the asterisk (*) while selecting children of a particular parent, so we can select all the children of that parent by:

parent * {
           property : value;
 }

We can use an asterisk (*) for intermediate level while selecting an element by:

grand_parent * grand_child{
           property : value;
 }

Examples:

Input:  * { color : green; }
Output:  The text in all the elements become green

Input:  * p { color : green; }
Output:  The text inside those  which are direct children of any elements of HTML the page will become green.

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        * {
            background-color: gray;
        }
         
        * p {
            background-color: green;
        }
         
        * p span {
            background-color: yellow;
        }
         
        div * h3 {
            background-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
 
        <div>
             
<p>
                div->p
                <span> div->p->span </span>
            </p>
 
            <span>
    <h3> div->span->h3</h3>
</span>
        </div>
 
         
<p>A computer science portal.</p>
 
    </center>
</body>
 
</html>