Is it possible to use a "wildcard" for elements having a class name starting with a specific string in CSS3?

Example:

<div class="myclass-one"></div> <div class="myclass-two"></div> <div class="myclass-three"></div>

and then magically set all the above divs to red in one go:

.myclass* { color: #f00; }

fudge's user avatar

fudge

3411 gold badge9 silver badges22 bronze badges

asked Nov 12, 2012 at 21:45

jchwebdev's user avatar

2

The following should do the trick:

div[class^='myclass'], div[class*=' myclass']{ color: #F00; }

Edit: Added wildcard (*) as suggested by David

answered Nov 12, 2012 at 21:46

Koen.'s user avatar

11 Comments

Only if the class beginning with myclass is also the first class-name contained within the class attribute. You might want to try div[class*=myclass] { /* ...stuff... */}.

2012-11-12T21:48:00.707Z+00:00

even better; to prevent collision div[class*=' myclass'],div[class^='myclass']

2012-11-12T21:48:54.103Z+00:00

Schweet! I always forget about the attribute thing (probably because it looks so ugly.) What I -still- don't understand is this: According to the W3C page: w3schools.com/cssref/css_selectors.asp the syntax is: div[class*="test"] Yet, it -seems- to work like this, with no 'element' specified: [class*="test"] ...which I don't get. IOW, -why- does this work? (I'm not complaining, I like it -better-!) I just don't want to start using it and find out that it's a bug that later gets 'fixed'. Any ideas? THANKS! ---JC

2012-11-13T01:25:31.53Z+00:00

@jchwebdev--it is not a bug. The attribute selector is just like any other selector (it can be used as a "stand alone"). It is no different that .myClass potentially being used with div.myClass instead. The attribute selector can stand alone (matching any elements that meet that criteria) or be narrowed to specific element. So don't worry about it being odd to have [class*="myClass"] all by itself.

2012-11-13T03:11:37.923Z+00:00

Not sure why you've overqualified with div - or why you didn't include the -

2015-09-11T17:09:02.687Z+00:00

It's not a direct answer to the question, however I would suggest in most cases to simply set multiple classes to each element:

<div class="myclass one"></div> <div class="myclass two"></div> <div class="myclass three"></div>

In this way you can set rules for all myclass elements and then more specific rules for one, two and three.

.myclass { color: #f00; } .two { font-weight: bold; } etc.

Andrew Tibbetts's user avatar

answered Nov 12, 2012 at 21:48

James Montagne's user avatar

15 Comments

By using multiple classes rather than looking for prefixes, you also save yourself a few battles with specificity and selector speed. Attribute selectors are slow, but also are really very specific compared to just classes. +1

2012-11-12T21:51:12.613Z+00:00

I get it. I'm using WordPress, which assigns similar named classes based on 'slug'. So the attribute solution is -way- easier than trying to add additional classes to each relevant page.

2012-11-13T01:28:00.43Z+00:00

@TWiStErRob Yeah, imagine how I feel - I got -4 and answered FIRST, this guy said the exact same thing AFTER and gets upvotes haha.

2015-08-20T13:28:18.093Z+00:00

@sheriffderek I still don't see it. There's a 1:1 correspondence: myclass<->another-class, one<->myclass-one also you may need to be specific with .generic.special to increase the selector's specificity to apply overrides for color for example. (Not my answer, I just don't see the difference, and the votes feel unfair. Also the div comes from the question.)

2015-09-11T18:23:31.27Z+00:00

@WylliamJudd - Correct. Which is why the whole comments took off to begin with. The answers are identical, I submitted my answer first but was downvoted (originally) and this one was upvoted - hence all the confusion. But oh well as long as they help people in the future solve similar issues - great!

2017-11-03T12:59:46.39Z+00:00

You can easily add multiple classes to divs... So:

<div class="myclass myclass-one"></div> <div class="myclass myclass-two"></div> <div class="myclass myclass-three"></div>

Then in the CSS call to the share class to apply the same styles:

.myclass {...}

And you can still use your other classes like this:

.myclass-three {...}

Or if you want to be more specific in the CSS like this:

.myclass.myclass-three {...}

TMB's user avatar

TMB

4,7034 gold badges28 silver badges45 bronze badges

answered Nov 12, 2012 at 21:48

Andy's user avatar

5 Comments

I don't think this answer is that bad. I would just edit another-class to be myclass... class="myclass myclass-one"

2015-10-12T18:40:34.75Z+00:00

now its similar to the above

2015-10-12T18:42:21.927Z+00:00

I did not see that thread above...

2015-10-12T18:46:08.5Z+00:00

I still wouldn't give either of these answers too many points, because they don't answer the wildcard question.

2015-10-12T18:54:34.703Z+00:00

Correct, it is similar to the one above, ironically it was posted first & got negative votes. Haha. Also, it's not a DIRECT answer, but an alternate solution that perhaps the original author didn't think about & probably the ideal solution in all scenarios in which you have full control over HTML & CSS.

2015-10-19T20:02:47.17Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.