wildcard in CSS for classes

Question

I have these divs that I m styling with  tocolor  but I also need the unique identifier 1 2 3 4 etc  so I m adding that it as another class tocolor-1     lt div class  tocolor tocolor-1  gt    tocolor 1    lt  div gt   lt div class  tocolor tocolor-2  gt    tocolor 2    lt  div gt   lt div class  tocolor tocolor-3  gt    tocolor 3    lt  div gt   lt div class  tocolor tocolor-4  gt    tocolor 4    lt  div gt    tocolor    background  red      Is there a way to have just 1 class tocolor-   I tried using a wildcard   as in this css  but it didn t work    tocolor-     background  red

User · Answer

An alternative solution   div class   tocolor   will match for values of the  class  attribute that begin with  tocolor-   including  tocolor-1    tocolor-2   etc   Beware that this won t match    lt div class  foo tocolor-  gt    Reference  https   www w3 org TR css3-selectors  attribute-representation      att  val       Represents an element with the att attribute  its value either being exactly  val  or beginning with  val  immediately followed by  -   U 002D

User · Answer

Yes you can do this    id   term-         css here     This will select all ids that start with  term-   As for the reason for not doing this  I see where it would be preferable to select this way  as for style  I wouldn t do it myself  but it s possible

User · Answer

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  Read on here or try a google search for HTML5 Custom Data Attributes

User · Answer

What you need is called attribute selector  An example  using your html structure  is the following    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    class   tocolor-       starts with  tocolor-    class    tocolor-       contains the substring  tocolor-  occurring directly after a space character   Demo  http   jsfiddle net K3693 1   More information on CSS attribute selectors  you can find here and here  And from MDN Docs MDN Docs

[css] wildcard * in CSS for classes

Examples related to css

Examples related to css-selectors

Examples related to wildcard