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 1470 · Accepted Answer · edited Nov 22 '18 at 00:29

1470

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

353
4
14

answered Feb 24 '11 at 20:53

Sotiris

38,986
11
53
85

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
4

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
3

@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
To select multiple substrings, see here: https://stackoverflow.com/questions/49189549/css-selector-wildcard-inside-class-name – J0ANMM Feb 25 '23 at 11:31

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

135

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,891
2
17
14

1

Thank you for this `ID` based addendum, not just for `class`. – Khom Nazid May 25 '19 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 Jul 26 '22 at 18:30

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

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)

edited Sep 25 '19 at 13:37

Poul Kruijt

69,713
12
145
149

answered Feb 20 '12 at 23:03

aortbals

463
4
3

14

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,187
3
25
35

wildcard * in CSS for classes

4 Answers4

Linked

Related