{"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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;div class=&quot;tocolor tocolor-1&quot;&gt;   tocolor 1   &lt;\/div&gt;<br\/>&lt;div class=&quot;tocolor tocolor-2&quot;&gt;   tocolor 2   &lt;\/div&gt;<br\/>&lt;div class=&quot;tocolor tocolor-3&quot;&gt;   tocolor 3   &lt;\/div&gt;<br\/>&lt;div class=&quot;tocolor tocolor-4&quot;&gt;   tocolor 4   &lt;\/div&gt;<br\/>.tocolor<br\/>{<br\/>  background: red;<br\/>}<\/code><\/pre> <\/div>\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&#8217;t work.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.tocolor-*<br\/>{<br\/>  background: red;<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div[class^=&quot;tocolor-&quot;], div[class*=&quot; tocolor-&quot;] <br\/>{<br\/>    color:red <br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">[class^=&quot;tocolor-&quot;] \u2014 starts with &quot;tocolor-&quot;.<br\/>[class*=&quot; tocolor-&quot;] \u2014 contains the substring &quot;tocolor-&quot; occurring directly after a space character.<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>You can use this.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">*[id^=&#039;term-&#039;]<br\/>{<br\/>    [css here]<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>This will select all ids that start with &#8216;term-&#8216;.<\/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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div[class|=&#039;tocolor&#039;] will match for values of the &quot;class&quot; attribute that begin with &quot;tocolor-&quot;, including &quot;tocolor-1&quot;, &quot;tocolor-2&quot;, etc.<\/code><\/pre> <\/div>\n<p><b>[att|=val]<\/b><\/p>\n<ul>\n<li>Represents an element with the att attribute, its value either being exactly &#8220;val&#8221; or beginning with &#8220;val&#8221; immediately followed by &#8220;-&#8221; (U+002D)<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>If you don&#8217;t 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=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;mark-as-unread otherClass&quot;&gt;   Book 1   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-reading otherClass&quot;&gt;   Book 2   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-read otherClass&quot;&gt;   Book 3   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-not-interested otherClass&quot;&gt;   Book 4   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-unread otherClass&quot;&gt;   Book 1   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-reading otherClass&quot;&gt;   Book 2   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-read otherClass&quot;&gt;   Book 3   &lt;\/div&gt;<br\/>&lt;div class=&quot;mark-as-not-interested otherClass&quot;&gt;   Book 4   &lt;\/div&gt;<\/code><\/pre> <\/div>\n<h4 id=\"css-for-css-wildcard\"><span style=\"color: #800080;\"><b>CSS \u2013 for CSS Wildcard :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div[class*=&#039;-read&#039;] {color:blue; }<br\/>div[class*=&#039;-read &#039;] {text-decoration:line-through;}<br\/>div[class*=&#039;mark-as&#039;] {font-style:italic; }<br\/>.otherClass {font-size:200%;}<br\/>div[class*=&#039;-read&#039;] {color:blue; }<br\/>div[class*=&#039;-read &#039;] {text-decoration:line-through;}<br\/>div[class*=&#039;mark-as&#039;] {font-style:italic; }<br\/>.otherClass {font-size:200%;}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.classname-* {}<br\/>element[class*=&#039;CLASSNAMEPREFIX&#039;], element[class^=&#039; CLASSNAMEPREFIX&#039;]<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div[class*=&#039;mike-&#039;], div[class^=&#039; mike-&#039;] <br\/>{ <br\/>border: 1px solid #f00;<br\/> }<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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. Is there a way to have just 1 class tocolor-*. we tried using a wildcard * as in this css, but it didn&#8217;t work. SOLUTION 1: What [&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}]}}