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

PROBLEM:

• 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.

[pastacode lang=”css” manual=”%3Cdiv%20class%3D%22tocolor%20tocolor-1%22%3E%20%20%20tocolor%201%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22tocolor%20tocolor-2%22%3E%20%20%20tocolor%202%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22tocolor%20tocolor-3%22%3E%20%20%20tocolor%203%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22tocolor%20tocolor-4%22%3E%20%20%20tocolor%204%20%20%20%3C%2Fdiv%3E%0A.tocolor%0A%7B%0A%20%20background%3A%20red%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

• Is there a way to have just 1 class tocolor-*. we tried using a wildcard * as in this css, but it didn’t work.

[pastacode lang=”css” manual=”.tocolor-*%0A%7B%0A%20%20background%3A%20red%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 1:

• What you need is called attribute selector. An example, using your html structure, is the following:

[pastacode lang=”css” manual=”div%5Bclass%5E%3D%22tocolor-%22%5D%2C%20div%5Bclass*%3D%22%20tocolor-%22%5D%20%0A%7B%0A%20%20%20%20color%3Ared%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

• 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.

[pastacode lang=”css” manual=”%5Bclass%5E%3D%22tocolor-%22%5D%20%E2%80%94%20starts%20with%20%22tocolor-%22.%0A%5Bclass*%3D%22%20tocolor-%22%5D%20%E2%80%94%20contains%20the%20substring%20%22tocolor-%22%20occurring%20directly%20after%20a%20space%20character.%0A” message=”CSS code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 2:

• You can use this.

[pastacode lang=”css” manual=”*%5Bid%5E%3D’term-‘%5D%0A%7B%0A%20%20%20%20%5Bcss%20here%5D%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

• This will select all ids that start with ‘term-‘.

SOLUTION 3:

• An alternative solution:

[pastacode lang=”css” manual=”div%5Bclass%7C%3D’tocolor’%5D%20will%20match%20for%20values%20of%20the%20%22class%22%20attribute%20that%20begin%20with%20%22tocolor-%22%2C%20including%20%22tocolor-1%22%2C%20%22tocolor-2%22%2C%20etc.%0A” message=”CSS code” highlight=”” provider=”manual”/]

[att|=val]

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

SOLUTION 4:

• 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

[ad type=”banner”]

SOLUTION 5:

HTML – for CSS Wildcard :

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22mark-as-unread%20otherClass%22%3E%20%20%20Book%201%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-reading%20otherClass%22%3E%20%20%20Book%202%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-read%20otherClass%22%3E%20%20%20Book%203%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-not-interested%20otherClass%22%3E%20%20%20Book%204%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-unread%20otherClass%22%3E%20%20%20Book%201%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-reading%20otherClass%22%3E%20%20%20Book%202%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-read%20otherClass%22%3E%20%20%20Book%203%20%20%20%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22mark-as-not-interested%20otherClass%22%3E%20%20%20Book%204%20%20%20%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]

CSS – for CSS Wildcard :

[pastacode lang=”css” manual=”div%5Bclass*%3D’-read’%5D%20%7Bcolor%3Ablue%3B%20%7D%0Adiv%5Bclass*%3D’-read%20’%5D%20%7Btext-decoration%3Aline-through%3B%7D%0Adiv%5Bclass*%3D’mark-as’%5D%20%7Bfont-style%3Aitalic%3B%20%7D%0A.otherClass%20%7Bfont-size%3A200%25%3B%7D%0Adiv%5Bclass*%3D’-read’%5D%20%7Bcolor%3Ablue%3B%20%7D%0Adiv%5Bclass*%3D’-read%20’%5D%20%7Btext-decoration%3Aline-through%3B%7D%0Adiv%5Bclass*%3D’mark-as’%5D%20%7Bfont-style%3Aitalic%3B%20%7D%0A.otherClass%20%7Bfont-size%3A200%25%3B%7D%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 6:

• Apparently you can do wildcards in CSS3 with attribute selectors.

[pastacode lang=”css” manual=”.classname-*%20%7B%7D%0Aelement%5Bclass*%3D’CLASSNAMEPREFIX’%5D%2C%20element%5Bclass%5E%3D’%20CLASSNAMEPREFIX’%5D%0A” message=”CSS code” highlight=”” provider=”manual”/]

• e.g. if we have classes mike-1, mike-2, mike-3, mike-all and we want them to share the same border style

[pastacode lang=”css” manual=”div%5Bclass*%3D’mike-‘%5D%2C%20div%5Bclass%5E%3D’%20mike-‘%5D%20%0A%7B%20%0Aborder%3A%201px%20solid%20%23f00%3B%0A%20%7D%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

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″).