CODEWITHSUNDEEP
htmlcss
Nocide Mugen
Nocide Mugen

Reputation: 25

Css for multiple class

I'd like to know if it's possible to use css for multiple class with the same name with one exception an iterator inside :

<div class="elem-1"></div>

<div class="elem-2"></div>

If it's possible, how should I use my css to implement those two classes (can be lot more than 2)?

Upvotes: 1

Views: 113

Answers (2)

Quentin
Quentin

Reputation: 944321

In general, you should use multiple classes in the HTML.

<div class="shape shape-3-corners"></div>
<div class="shape shape-4-corners"></div>

Both divs are in the group of divs which represent shapes.

Only one div is in each of the group that represent shapes with a particular number of corners.

You could also look at pattern matching with attribute selectors. Unfortunately, the syntax is somewhat limited.

[class*="elem-"] would work for your particular example, but give you false positives for class="not-elem-3".

[class^="elem-"] would work for your particular example, but give you false negatives for class="another-class and elem-3".

You could also group your selectors:

.elem-1,
.elem-2 { }

… but then you would have to specify every number, and update the CSS if you added more. If you had a lot, it would get quite unwieldy.

Upvotes: 5

lupz
lupz

Reputation: 3638

You could use CSS attribute selectors like this:

[class^="elem-"], [class*=" elem-"] {
  /* style properties */
}

But I would rather suggest to use 2 classes like this

<div class="elem specialStuffClass">...</div>

Another option might be to use counting selectors like nth-child.

Upvotes: 0

Related Questions