1

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)?

Improve this question
8
  • 5
    What do you mean when you say "an iterator inside"? Commented Nov 10, 2016 at 10:16
  • 4
    div[class^="elem-"] Commented Nov 10, 2016 at 10:18
  • @mamosek is right Commented Nov 10, 2016 at 10:18
  • 1
    You can use styles for multiple classes by giving , elem-1,elem-2{} Commented Nov 10, 2016 at 10:19
  • I set an example to show what I mean by that. As you can see there is two classes, and the only difference between them is the number, but this number can go to a lot more than 2 Commented Nov 10, 2016 at 10:20

2 Answers 2

Reset to default
5

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.

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

2 Comments

You can add a reference to the docs - css selectors
@MoshFeu — There are links to the W3C recommendation in the answer already.
0

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.

Improve this answer

4 Comments

That was exacly the same what i have said in comment to your question ^.^
@mamosek — It isn't. You only mentioned the first (broken) solution out of the two this answer offers. (And if you want credit for an answer, then don't try answering the question in the comments)
Firstable, my answer is not broken . And the second I just wanted to mention that it was just like I said before. You have just extended the answer. And ... ah - i thought that there is also a credit if you answer in comment ;v. Best wishes
@mamosek — "Firstable, my answer is not broken" — Yes it is. It risks false negatives and false positives. "i thought that there is also a credit if you answer in comment" — Comments are for comments not for answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.