Klassen zusammenfassen

[Feldwebel]

Guten Abend,

ich lag ja eigentlich schon im Bette und muss nun doch noch mal mit einer Frage an die Community herantreten, die mir einfach keine Ruhe und mich daher nicht schlafen lässt...

Wie lassen durchnummerierte Klassen zusammenfassen und gemeinsam ansprechen? Also beispielsweise statt

.klasse_1 {background-color:red;}
.klasse_2 {background-color:red;}
.klasse_3 {background-color:red;}
.klasse_4 {background-color:red;}
.klasse_5 {background-color:red;}
etc.

sowas wie

.klasse_[ANFANGSZAHL] - .klasse_[ENDZAHL] {background-color:red;}

Muss ich da via javascript mit einer for-Schleife arbeiten oder lässt sich das allein mit CSS regeln?

Mein Dank gilt jedem Rat spendenden Engel, Euer Feldwebel.

[Feldwebel]

P.S.: Zur Verdeutlichung: ich will also alle Klassen ansprechen, die mit "klasse_" beginnen und dann von einer Nummer in geordneter aufsteigender Reihenfolge komplettiert werden; - sowas UNGEFÄHR in die Richtung

function () {
var x = 1;
while ([SOLANGE SICH ZAHLEN FÜR x IM HTML-DOKUMENT FINDEN]) {
'klasse_' + x + '{background-color:red;}'
x++
}
}

[Entschuldigung, es ist nun mal schon spät...]

[Oliver0807]

Hi,

wozu "n" verschiedene Klassen, wenn doch eine reichen würde?

.klasse_1 {background-color:red;} .klasse_2 {background-color:red;} .klasse_3 {background-color:red;} .klasse_4 {background-color:red;} .klasse_5 {background-color:red;}

.klasse{
...
}

Die Klasse .klasse{} geht jetzt quasi von 1 - n.

LG Oliver0807

[Felix Riesterer]

Lieber Feldwebel,

ich lag ja eigentlich schon im Bette und muss nun doch noch mal mit einer Frage an die Community herantreten, die mir einfach keine Ruhe und mich daher nicht schlafen lässt...

DAS kenn ich nur zu gut... :-/

> .klasse_1 {background-color:red;}
> .klasse_2 {background-color:red;}
> .klasse_3 {background-color:red;}
> .klasse_4 {background-color:red;}
> .klasse_5 {background-color:red;}
> etc.
> 

Du kannst es nicht generisch machen. Du müsstest wohl entweder zwei Klassen verwenden, oder eben alles so notieren:

.klasse_1, .klasse_2, .klasse_3, ... .klasse_67 {
 background-color: red;
}

Eine Nummerierung im Klassennamen klingt für mich sehr danach, dass Dein Konzept bezüglich der Klassennamen reichlich unausgegoren ist.

sowas wie

> .klasse_[ANFANGSZAHL] - .klasse_[ENDZAHL] {background-color:red;}
> 

Hmm. Vielleicht kann der Attribut-Selektor helfen? Zum Beispiel so: jsFiddle-Beispiel

Muss ich da via javascript mit einer for-Schleife arbeiten oder lässt sich das allein mit CSS regeln?

Wie im Beispiel zu sehen ist, geht das mit einem Attribut-Selektor, wenn der verwendete Browser das auch unterstützt.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

Hmm. Vielleicht kann der Attribut-Selektor helfen? Zum Beispiel so: jsFiddle-Beispiel

… nicht.

Wie im Beispiel zu sehen ist, geht das mit einem Attribut-Selektor,

Wie im Beispiel zu sehen ist, geht das so nicht, da alle Klassen selektiert werdenn, die mit "my-class-" anfangen, und nicht wie gefordert nur die Klassen "my-class-1" bis "my-class-5".

wenn der verwendete Browser das auch unterstützt.

?? Welcher heutzutage relevante Browser unterstützt keine Attribut-Selektoren?

LLAP

[Gunnar Bittersmann]

@@Feldwebel:

Muss ich da via javascript mit einer for-Schleife arbeiten

Nein.

oder lässt sich das allein mit CSS regeln?

Mit CSS nicht (solange man in Attributselektoren keine regulären Ausdrücke verwenden kann).

Aber mit CSS-Präprozessor: Beispiel Sass.

LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Aber mit CSS-Präprozessor: Beispiel Sass.

Zum Wiederverwenden als Mixin.

LLAP