Before proceeding to css asterisk selector, I’ll advice you to read CSS tutorial for beginners, CSS Properties and Values and CSS Selectors first. If you have already read, then we’re good to proceed.

Introduction to CSS Asterisk Selector

As * is in most of the places is considered as a wildcard, so yea,,,. CSS Asterisk selector it is used to select Everything in the webpage and then apply styling to it.

Example Usage:

*{
   property:value;
   property:value;
}

* was introduced since CSS2 and is up and running in the latest version of CSS which is CSS3 as well. * is supported in all modern browsers.

Usage of * is explained in detailed below :

See the Pen CSS * Selector by The SuperKat (@thesuperkat) on CodePen.

So as we see, Asterisk (*) can be useful in many cases. As we don’t have to specify a specific HTML Element. It covers all the nested elements as well, yeah It’s a pretty handy to have it.

And not only that, if we use css * selector in combination to the css attribute selector. We can achieve even more precision and control over our webpage. CSS attribute selector is used to target elements according to their attribute values. For example href value  in tag.

Let’s take a look at example below :

  
    

      paragraph with 80 width
    
 
    

      paragraph with 70 width 
      The SueprKat
    
    

      div with 80 width
      

        div with 70 width
      
    
  

and

*[href="http://thesuperkat.com/"]{
  color:green;
}

*[width="80"]{
  padding:15px;
  background:yellow;
}

*[width="70"]{
  padding:15px;
  background:black;color:#fff;
}

And Output :

See the Pen XKwajb by The SuperKat (@thesuperkat) on CodePen.

Hence, it is clear that, The only limit to the creativity here is your imagination. Just dont think, let it out on your own and have fun coding.

Next Step : CSS id selector

The post CSS asterisk Selector appeared first on The Superkat.