841

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. 

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.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;
}
Improve this question
1

4 Answers 4

Reset to default
1516

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

Improve this answer
7
  • 4
    Cool info. Only caveat is if performance is an issue, most CSS linters will reject attribute selectors that resemble regex (e.g. using '*') b/c of slow performance. With the exception of using a preprocessor (e.g. Sass), is there any other possible way of doing this?
    – CodeFinity
    Commented Sep 29, 2014 at 13:45
  • 4
    Is there a way to check if the class attribute contains multiple substrings? Maybe something like div[class*="foo"][class="bar"]?
    – Connor
    Commented Jun 22, 2017 at 14:30
  • That space in our "contains" example is pretty killer. From what I can see, it shouldn't be there, correct?
    – Thomas
    Commented Aug 14, 2017 at 19:49
  • 3
    @Thomas That is required to ensure class="foo tocolor-red" matches, but not class="foo fromtocolor-red-blue"
    – aleclarson
    Commented Sep 28, 2018 at 21:02
  • Thanks for this. I've been using this technique for a few years, but never realized that class^= only applies to the beginning of the HTML class entry. I thought it applied to all class names defined for the HTML tag.
    – BevansDesign
    Commented May 2, 2019 at 15:04
141

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.

Improve this answer
2
  • 1
    Thank you for this ID based addendum, not just for class.
    – Khom Nazid
    Commented May 25, 2019 at 17:07
  • This is a superior solution I voted up because using style classes for identification is poor semantics, poor HTML design, and adds extra code. Your solution combines ID with style so is more compact. I still do not understand why so many new developers are still terrified of using the "id" attribute, when it is designed for unique identification of tags, allows fast access by scripts, is supported in every browser ever made the past 20+ years, and has high CSS specificity. Silly kids
    – Stokely
    Commented Jul 26, 2022 at 18:30
34

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 

<div class="foo tocolor-">

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)

Improve this answer
3
  • 14
    This won't work if the class attribute starts with some other class that doesn't begin with tocolor.
    – BoltClock
    Commented Aug 10, 2012 at 9:33
  • 1
    This also works beautifully in Qt's widget styleSheets. For example, to apply a style to all labels named foo*, you'd do QLabel[objectName|='foo'] { ... }
    – Kuba hasn't forgotten Monica
    Commented Aug 18, 2014 at 5:48
  • As @BoltClock said, this solution breaks if the element has multiple classes and they don't start with the class OP is looking for.
    – Dan Dascalescu
    Commented Feb 10, 2017 at 23:51
5

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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.