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.

<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;
}

Here's the official CSS3 site about selectors: http://www.w3.org/TR/css3-selectors And a compability list: http://www.findmebyip.com/litmus/ — GarfieldKlon, Aug 10 '12 at 09:28

score 1391 · Accepted Answer · edited Nov 22 '18 at 00:29

1391

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

edited Nov 22 '18 at 00:29

davidhartman00

344
3
14

answered Feb 24 '11 at 20:53

Sotiris

37,572
11
48
84

3

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 Sep 29 '14 at 13:45
2

Is there a way to check if the class attribute contains multiple substrings? Maybe something like `div[class*="foo"][class="bar"]`? – Connor Jun 22 '17 at 14:30
That space in our "contains" example is pretty killer. From what I can see, it shouldn't be there, correct? – Thomas Aug 14 '17 at 19:49
1

@Thomas That is required to ensure `class="foo tocolor-red"` matches, but not `class="foo fromtocolor-red-blue"` – aleclarson Sep 28 '18 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 May 02 '19 at 15:04
What if an element is dynamically given a class that starts with a string, then a number, then another string? A plugin I'm using gives each block different elements and numbering each class, for example the image parts are given classes .flip-box-1-image and .flip-box-2-image, but the heading parts are given .flip-box-1-heading and .flip-box-2-heading. So if I use [class^="flip-box-"] or [class*="flip-box-"] I will be targeting both the image elements and the heading elements. I want to selectively target one or the other. Is that possible and how? – webrightnow Aug 11 '21 at 16:02

thomas.han · Answer 2 · 2020-11-30T12:54:46.033

130

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.

edited Nov 30 '20 at 12:54

answered Apr 17 '11 at 21:45

thomas.han

2,801
2
15
14

1

Thank you for this `ID` based addendum, not just for `class`. – Khom Nazid May 25 '19 at 17:07

score 33 · Answer 3 · edited Sep 25 '19 at 13:37

33

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)

edited Sep 25 '19 at 13:37

Poul Kruijt

64,681
11
135
134

answered Feb 20 '12 at 23:03

aortbals

455
4
3

12

This won't work if the `class` attribute starts with some other class that doesn't begin with `tocolor`. – BoltClock Aug 10 '12 at 09: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 Aug 18 '14 at 05: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 Feb 10 '17 at 23:51

score 5 · Answer 4 · answered Feb 24 '11 at 20:55

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

answered Feb 24 '11 at 20:55

DKSan

4,166
3
24
35

wildcard * in CSS for classes

4 Answers4

Linked

Related