Skip to content
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;


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>


My Personal Notes arrow_drop_up
Recommended Articles
Page :