CSS HTML

[Solved -6 Answers] CSS – HTML – wildcard * in CSS for classes

  • We have these divs that styling with .tocolor, but we also need the unique identifier 1,2,3,4 etc. so we are adding that it as another class tocolor-1.
css code
<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>
.tocolor
{
  background: red;
}
  • Is there a way to have just 1 class tocolor-*. we tried using a wildcard * as in this css, but it didn’t work.
css code
.tocolor-*
{
  background: red;
}

  • What you need is called attribute selector. An example, using your html structure, is the following:
css code
div[class^="tocolor-"], div[class*=" tocolor-"] 
{
    color:red 
}
  • In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element.
CSS code
[class^="tocolor-"] — starts with "tocolor-".
[class*=" tocolor-"] — contains the substring "tocolor-" occurring directly after a space character.

  • You can use this.
css code
*[id^='term-']
{
    [css here]
}
  • This will select all ids that start with ‘term-‘.

  • An alternative solution:
CSS code
div[class|='tocolor'] will match for values of the "class" attribute that begin with "tocolor-", including "tocolor-1", "tocolor-2", etc.

[att|=val]

  • Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-” (U+002D)

  • If you don’t need the unique identifier for further styling of the divs and are using HTML5 you could try and go with custom Data Attributes.
  • Try a google search for HTML5 Custom Data Attributes

READ  [Solved -12 Answers] How to make div not larger than its contents

HTML – for CSS Wildcard :

html code
<div class="mark-as-unread otherClass">   Book 1   </div>
<div class="mark-as-reading otherClass">   Book 2   </div>
<div class="mark-as-read otherClass">   Book 3   </div>
<div class="mark-as-not-interested otherClass">   Book 4   </div>
<div class="mark-as-unread otherClass">   Book 1   </div>
<div class="mark-as-reading otherClass">   Book 2   </div>
<div class="mark-as-read otherClass">   Book 3   </div>
<div class="mark-as-not-interested otherClass">   Book 4   </div>

CSS – for CSS Wildcard :

css code
div[class*='-read'] {color:blue; }
div[class*='-read '] {text-decoration:line-through;}
div[class*='mark-as'] {font-style:italic; }
.otherClass {font-size:200%;}
div[class*='-read'] {color:blue; }
div[class*='-read '] {text-decoration:line-through;}
div[class*='mark-as'] {font-style:italic; }
.otherClass {font-size:200%;}

  • Apparently you can do wildcards in CSS3 with attribute selectors.
CSS code
.classname-* {}
element[class*='CLASSNAMEPREFIX'], element[class^=' CLASSNAMEPREFIX']
  • e.g. if we have classes mike-1, mike-2, mike-3, mike-all and we want them to share the same border style
css code
div[class*='mike-'], div[class^=' mike-'] 
{ 
border: 1px solid #f00;
 }

Following CSS attribute selectors,

  • * – will match any part of the attribute value to the given string
  • ^ – will match if the attribute begins with the given string (think class prefixes)
  • $ – matches if the attribute ends with the given string

Note :in the second selector, there’s an extra whitespace before “mike” which accounts for IE’s handling of having multiple classes (e.g. class=”mikebox mike-1″).

About the author

Wikitechy Editor

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X