CSS Target * classes with - and number

Question

I have this CSS which targets all classes containing a - character.

[class*="-"] {
    background-color: rgba(86, 61, 124, 0.15);
    border: 1px solid rgba(86, 61, 124, 0.2);
    padding-bottom: 15px;
    padding-top: 15px;
    margin-bottom: 20px;
}

Is it possible to target all classes with a - character and a number afer it?

IMHO, if you're using CSS selectors to target all classes with a pattern, you're not using CSS correctly ;) Namely, all of those elements should share a class, which will be faster, easier to maintain, and less error-prone than pattern matching. — Heretic Monkey
– Heretic Monkey, Commented Jul 28, 2015 at 20:24

LcSalazar · Accepted Answer · 2015-07-28 20:24:06Z

1

I believe the only way possible would be:

[class*="-0"],
[class*="-1"],
[class*="-2"],
[class*="-3"],
[class*="-4"],
[class*="-5"],
[class*="-6"],
[class*="-7"],
[class*="-8"],
[class*="-9"] {
    /*...*/
}

But I don't believe it's a wise selector. You should rethink your approach.

answered Jul 28, 2015 at 20:24

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

CSS Target * classes with - and number

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related