Apply CSS to classes that have name with numbers

Question

This is the HTML:

<div class="class1">Class</div>
<div class="class2">Class</div>
<div class="class3">Class</div>

CSS is the following:

.class1, .class2, .class3 { ... }

I'm not sure if it's possible, but I'm trying to simplify the css.

Something like:

.class(from1to3) { ... }

could you not add a generic `class` class and a `id` to the divs? — treyBake, Oct 26 '18 at 09:33
@ThisGuyHasTwoThumbs I get the classes from a script that automatically makes the name with numbers — Paul Borsan, Oct 26 '18 at 09:35
In contrary to what you suggest this certainly would _not_ be a simplification. Sure, that line might get a bit shorter. But as a tradeof you would make understanding the styling rules _much_ more difficult. Also simple text searches for the class name would _not_ produce hits any more. Taking all together: that is _not_ a good idea. Keep things transparent. Only exception: if those classes are created in a dynamic manner, but that would be questionable anyway... — arkascha, Oct 26 '18 at 09:36

score 5 · Accepted Answer · edited Oct 26 '18 at 11:41

5

If the class name will be the same for all elements, but with different numbers, you can use Attribute Selectors

div[class^="class"],
div[class*="class"] {
  color: red;
}

<div class="class1">Class</div>
<div class="class2">Class</div>
<div class="class3">Class</div>

edited Oct 26 '18 at 11:41

rrd

answered Oct 26 '18 at 09:34

Carl Binalla

score 0 · Answer 2 · 2018-10-26T09:36:43.547

0

You can use an attribute selector.

div[class*='class'] {...}

but the best solution i think is:

.class1, .class2, .class3 { ... }

edited Oct 26 '18 at 09:36

answered Oct 26 '18 at 09:36

score 0 · Answer 3 · answered Oct 26 '18 at 09:44

0

use div[class*="class"]

div[class*="class"] {
    background: #ffff00;
}

<div class="class1">Class</div>
<div class="class2">Class</div>
<div class="class3">Class</div>

answered Oct 26 '18 at 09:44

score 0 · Answer 4 · answered Oct 26 '18 at 11:46

0

Consider using SASS or another pre-processor, it would be easier.

answered Oct 26 '18 at 11:46

Dorian B

4 Answers4