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: w3.org/TR/css3-selectors And a compability list: findmebyip.com/litmus — GarfieldKlon
– GarfieldKlon, Commented Aug 10, 2012 at 9:28

davidhartman00 · Accepted Answer · 2018-11-22 00:29:42Z

1551

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, 2018 at 0:29

davidhartman00

3534 silver badges15 bronze badges

answered Feb 24, 2011 at 20:53

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

CodeFinity Over a year ago

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?

Connor Over a year ago

Is there a way to check if the class attribute contains multiple substrings? Maybe something like div[class*="foo"][class="bar"]?

Thomas Over a year ago

That space in our "contains" example is pretty killer. From what I can see, it shouldn't be there, correct?

aleclarson Over a year ago

@Thomas That is required to ensure class="foo tocolor-red" matches, but not class="foo fromtocolor-red-blue"

BevansDesign Over a year ago

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.

|

thomas.han · Accepted Answer · 2020-11-30 12:54:46Z

144

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, 2020 at 12:54

answered Apr 17, 2011 at 21:45

thomas.han

3,0482 gold badges19 silver badges15 bronze badges

2 Comments

Khom Nazid Over a year ago

Thank you for this ID based addendum, not just for class.

Stokely Over a year ago

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

Poul Kruijt · Accepted Answer · 2019-09-25 13:37:08Z

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, 2019 at 13:37

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

answered Feb 20, 2012 at 23:03

aortbals

4634 silver badges3 bronze badges

3 Comments

BoltClock Over a year ago

This won't work if the class attribute starts with some other class that doesn't begin with tocolor.

Kuba hasn't forgotten Monica Over a year ago

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'] { ... }

Dan Dascalescu Over a year ago

As @BoltClock said, this solution breaks if the element has multiple classes and they don't start with the class OP is looking for.

DKSan · Accepted Answer · 2011-02-24 20:55:02Z

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, 2011 at 20:55

DKSan

4,2073 gold badges27 silver badges35 bronze badges

Collectives™ on Stack Overflow

wildcard * in CSS for classes

4 Answers 4

7 Comments

2 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

3 Comments

Comments

Linked

Related