Frage CSS Indexierung?

[kagan1416]

Hey, gibt es die Möglichkeit mit CSS HTML-Elemente zu indexieren? Nehmen wir an ich habe fünf Geschwisterelemente und ich möchte allen eine individuelle Hintergrundfarbe zuordnen. Alle anderen Formatierungen sollen identisch sein. Klar könnte ich allen eine Klasse und verschiedene IDs für die individuellen Hintergrundfarben zuordnen, doch finde ich das persönlich unübersichtlich bei komplexeren Seiten. Gibt es da eine bessere Lösung, z. B. mehrere Hintergrundfarben den einzelnen Elemente in einer einzigen Klasse zuzuordnen? Danke!

 

[Aaron3219]

Naja es gibt schon mal die Möglichkeit mit :first-child und :last-child zu arbeiten.
So hast du schon mal 3 verschiedene, ohne ihnen eine ID zuzuordnen.

 

[Sailor]

Was spricht dagegen zwei Klassen zu vergeben?
Eine Klasse für alle Formate
.alles {
...;
}
und dann beliebige für Hintergrundfarben
.farbe1 {
background-color: irgendwas;
}
.farbe2 {
background-color: wasanderes;
}
....
Dann kannst deinen Geschwistern mit class="alles farbex" die gewünschten Formate zuweisen.
Einfacher und auch bei komplexen Seiten übersichtlich wirst du es kaum hinbekommen.

 

[Aaron3219]

Also wenn du nun WIRKLICH auf neue klassen verzichten willst und mehr als 3 verschiedene Hintergrundfarben brauchst, wäre da noch die Möglichkeit mit Javascript zu arbeiten. Damit kannst du das genaue Element (also z.B. Tochterelement 5, 8, etc.) ansprechen und ihnen jeweils eine Klasse geben. Der Code der dabei entsteht, unterscheidet sich aber nicht von CSS, also kannst du eigentlich Klasse nehmen.

 

[Aaron3219]

@Sempervivum ah danke. Danach habe ich schon lange gesucht. Wusste nicht mal dass das geht.

Gleich noch was dazugelernt ;)

 

[scbawik]

Alternativ dazu gäbe es auch noch inline-styles und adjacent sibling selectors:

.box { background-color: #CCC; }
.box + .box { background-color: #DDD; }
.box + .box + .box { background-color: #EEE; }

Ganz praktisch wenn man kein Wrapper-Element hat.