CSS Use Wildcard in Classes

• CSS Use Wildcard in Classes
• Understand the Problem without wildcard classes
• Use Wildcard in CSS

CSS Use Wildcard in Classes

Suppose you have unique class name for some divs and you want to apply some css to all. Unique classes will require to define individually or separate defination of each class. We can solve this problem by applying wildcard to attribute selector.

1. Use a new CSS class and add to all divs (Need to apply this new class in all divs)
2. Use wildcard in CSS

The following examples will demonstrate the usage of both senarios.

Understand the Problem without wildcard classes

The following code will not work because mColor class is not available in HTML div. The divs contain mColor1, mColor2, mColor3, mColor4. We want to use same mColor instead defining individual CSS class name.

<style> 
     div[class='mColor']  {color:blue;}
    /* Following CSS also woks the same */
    /* .mColor {color:blue;}  */
</style>

<div class="mColor1">  Blue Color   </div>
<div class="mColor2">  Blue Color   </div>
<div class="mColor3">  Blue Color   </div>
<div class="mColor4">  Blue Color   </div>

Use Wildcard in CSS

The ^ wild character define start of something. Like class^=‘mColor’ means start of class with mColor class name.

<style> 
    div[class^='mColor'] {color:red;} 
</style>

<div class="mColor-1">  Red Color   </div>
<div class="mColor-2">  Red Color   </div>
<div class="mColor-3">  Red Color   </div>
<div class="mColor-4">  Red Color   </div>

The * wild character define contains the substring. Like class*=‘Color’ means class that contains the substring “Color”

<style> 
    div[class*='Color']{color:green;} 
</style>

<div class="mColor-1">  Green Color   </div>
<div class="mColor-2">  Green Color   </div>
<div class="mColor-3">  Green Color   </div>
<div class="mColor-4">  Green Color   </div>