Related Articles

Related Articles

What is the use of asterisk (*) selector in CSS ?
  • Last Updated : 31 Jan, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :