Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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;


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.



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


Supported Browser:

  • Google Chrome 4.0
  • Internet Explorer 7.0
  • Firefox 2.0
  • Opera 9.6
  • Safari 3.1

Last Updated : 03 Jul, 2021
Like Article
Save Article
Similar Reads
Related Tutorials