Zum Inhalt springen

contentelemente farblich abeheben im css

Erstellt am 12. Oktober 2012 · 3 Antworten · letzte Antwort am 12. Oktober 2012

Tags: Frage

bkbd10 ·

Hallo suche eine Möglichkeit aufeinanderfolgende Inhaltselementen unterschiedliche farben zugeben also z.B. erstes Textelement hat einen weißen Hintergrund und das zweite hat dann einen grauen hintergrund. habe es bisher auf die schnelle nur mit den ID´s im CSS angesteuert ist ja aber doch recht mühsam. gibt es da eine möglichkeit das ganze automatisch zu lösen?

gruß

BKBD

Drusilla ·

In CSS3 gibt es solche Möglichkeiten mit Pseudoklassen :nth-of-type zum Beispiel.

Ansonsten könntest du mal mit Folgeelement-Selektoren rumexperimentieren, z.B. p, p+p, p+p+p ... so könnte man 3 aufeinanderfolgende Absätze jeweils unterschiedlich formatieren

bkbd10 ·

Hallo Danke für die Antwort,

die Pseudoklassen sind ja wieder so ein thema der Browserunterstützung.
wie würden die folgeselektoren denn angewendet werden?

.p {
background: #ffffff; }

.p+p {
background: #cccccc; }

oder wie?

es geht ja letztlich darum das wenn ich z.B. bilder oder texte und was auch immer die im backend aufeinander folgen, als einzelne contentelemente, diese dann entsprechend automatisch differenziert dargestellt werden können. ich weiß ja nicht ob das mit den folgeelement-selektoren dann die ideale lösung ist?

gruß

bkbd

Chrissli ·

Hallo bkbd,

generell gibt es die Alternative mit split und optionSplit beim Wrappen der Elemente.
Je nachdem wie gut du dich bereits im TS auskennst und wie du deine Elemente renderst, kann
das aber gerne etwas komplizierter werden.

Ich gehe mal davon aus, dass du deine Inhalte per tt_content ausgibts.
Die einfache Variante wäre hier jedes Content-Element mit einem even/odd Container zu wrappen.
Wenn du natürlich in einem Container z.b. 6 Bilder hast und DIESE abwechselnd wrappen willst, wird
es etwas komplizierter, da du hier einiges im tt_content erweitert und überschreiben muss, je nachdem wie du
die Elemente gewrappt haben willst für deine Zwecke.

Eine weitere Alternative zu der ich gerne greife z.B. bei Tabellen oder wenn die finanziellen Mittel für die
"sauberere" Lösung zu knapp sind, ist per Javascript die gewünschten Container durchzunummerieren oder per even/odd/first/last/usw. zu markieren, da mittlerweile eigentlich jeder Javascript hat ( oder sich daran gewöhnt hat, vom Internet als Randgruppe mit eingeschränkten Funktionen und Optik behandelt zu werden )