{"id":2191,"date":"2017-03-25T14:54:10","date_gmt":"2017-03-25T09:24:10","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2191"},"modified":"2017-03-28T15:32:14","modified_gmt":"2017-03-28T10:02:14","slug":"wildcard-css-classes","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/wildcard-css-classes\/","title":{"rendered":"[Solved -6 Answers] CSS &#8211;  HTML &#8211; wildcard * in CSS for classes"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<ul>\n<li>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.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>Is there a way to have just 1 class tocolor-*. we tried using a wildcard * as in this css, but it didn\u2019t work.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.tocolor-*%0A%7B%0A%20%20background%3A%20red%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>What you need is called attribute selector. An example, using your html structure, is the following:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>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.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dCSS code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>You can use this.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d*%5Bid%5E%3D\u2019term-\u2018%5D%0A%7B%0A%20%20%20%20%5Bcss%20here%5D%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>This will select all ids that start with \u2018term-\u2018.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>An alternative solution:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv%5Bclass%7C%3D\u2019tocolor\u2019%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\u201d message=\u201dCSS code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><b>[att|=val]<\/b><\/p>\n<ul>\n<li>Represents an element with the att attribute, its value either being exactly \u201cval\u201d or beginning with \u201cval\u201d immediately followed by \u201c-\u201d (U+002D)<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>If you don\u2019t need the unique identifier for further styling of the divs and are using HTML5 you could try and go with custom Data Attributes.<\/li>\n<li>Try a google search for HTML5 Custom Data Attributes<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<h4 id=\"html-for-css-wildcard\"><span style=\"color: #808000;\"><b>HTML \u2013 for CSS Wildcard :<\/b><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"css-for-css-wildcard\"><span style=\"color: #800080;\"><b>CSS \u2013 for CSS Wildcard :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv%5Bclass*%3D\u2019-read\u2019%5D%20%7Bcolor%3Ablue%3B%20%7D%0Adiv%5Bclass*%3D\u2019-read%20\u2019%5D%20%7Btext-decoration%3Aline-through%3B%7D%0Adiv%5Bclass*%3D\u2019mark-as\u2019%5D%20%7Bfont-style%3Aitalic%3B%20%7D%0A.otherClass%20%7Bfont-size%3A200%25%3B%7D%0Adiv%5Bclass*%3D\u2019-read\u2019%5D%20%7Bcolor%3Ablue%3B%20%7D%0Adiv%5Bclass*%3D\u2019-read%20\u2019%5D%20%7Btext-decoration%3Aline-through%3B%7D%0Adiv%5Bclass*%3D\u2019mark-as\u2019%5D%20%7Bfont-style%3Aitalic%3B%20%7D%0A.otherClass%20%7Bfont-size%3A200%25%3B%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>Apparently you can do wildcards in CSS3 with attribute selectors.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.classname-*%20%7B%7D%0Aelement%5Bclass*%3D\u2019CLASSNAMEPREFIX\u2019%5D%2C%20element%5Bclass%5E%3D\u2019%20CLASSNAMEPREFIX\u2019%5D%0A\u201d message=\u201dCSS code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>e.g. if we have classes mike-1, mike-2, mike-3, mike-all and we want them to share the same border style<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv%5Bclass*%3D\u2019mike-\u2018%5D%2C%20div%5Bclass%5E%3D\u2019%20mike-\u2018%5D%20%0A%7B%20%0Aborder%3A%201px%20solid%20%23f00%3B%0A%20%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h4 id=\"following-css-attribute-selectors\"><span style=\"color: #808000;\"><b>Following CSS attribute selectors,<\/b><\/span><\/h4>\n<ul>\n<li>* \u2013 will match any part of the attribute value to the given string<\/li>\n<li>^ \u2013 will match if the attribute begins with the given string (think class prefixes)<\/li>\n<li>$ \u2013 matches if the attribute ends with the given string<\/li>\n<\/ul>\n<p><span style=\"color: #ff0000;\"><span style=\"color: #333300;\"><b>Note<\/b><\/span>\u00a0:<\/span>in the second selector, there\u2019s an extra whitespace before \u201cmike\u201d which accounts for IE\u2019s handling of having multiple classes (e.g. class=\u201dmikebox mike-1\u2033).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] Is there a way to have just 1 class tocolor-*. we tried using a wildcard * as in this css, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[4775,4777,4774,4780,4783,4785,4779,4771,4778,4781,4776,4772,4770,4784,4782,4773],"class_list":["post-2191","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-attribute-selectors","tag-code-snippet-css-wildcard-selectors","tag-css-selector","tag-css-asterisk-selector","tag-css-class-ends-with","tag-css-regex-selector","tag-css-selector-wildcard-jquery","tag-css-wildcard-kind-of-css-attribute-selector","tag-css-wildcard-contains","tag-css-wildcard-selector-performance","tag-css3-selectors-with-wildcards","tag-how-to-use-wildcards-with-css-selectors","tag-is-it-possible-to-use-css-wildcard-class-selector","tag-less-wildcard-selector","tag-selenium-css-selector-wildcard","tag-using-wildcard-selectors-in-css"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2191"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2191\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}