- 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.
- Is there a way to have just 1 class tocolor-*. we tried using a wildcard * as in this css, but it didn’t work.
- What you need is called attribute selector. An example, using your html structure, is the following:
- 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.
- You can use this.
- This will select all ids that start with ‘term-‘.
- An alternative solution:
- 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
HTML – for CSS Wildcard :
CSS – for CSS Wildcard :
- Apparently you can do wildcards in CSS3 with attribute selectors.
- e.g. if we have classes mike-1, mike-2, mike-3, mike-all and we want them to share the same border style
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″).