Hallo!

Eine etwas ungewöhnliche Frage, doch ich hoffe trotzdem auf Hilfe.

Folgender Sachverhalt:


Dieser HTML-Code liegt mir vor:

HTML-Code:

<table>
  <tr>
    <td>
	  <input type="radio" id="rad1" value="1" />
	</td>
    <td>
	  <input type="radio" id="rad2" value="2" />
	</td>
    <td>
	  <input type="radio" id="rad3" value="3" />
	</td>
    <td>
	  <input type="radio" id="rad4" value="4" />
	</td>
  </tr>
</table>

Mein Ziel ist es nun, die dritte Spalte innerhalb dieser Tabelle mit bestimmten (style-)Eigenschaften mittels CSS zu gestalten. Z. B. soll die dritte Spalte in einer anderen Farbe als die restlichen Spalten dieser Tabelle dargestellt werden.


Soweit so gut und sicherlich auch keine Herausforderung.

Aber mal angenommen, mir bleibt es verwehrt die <td>-Elemente innerhalb dieser Tabelle mit Attributen zu beschreiben (also keine id, style oder sonsitges sind für die <td>-Elemente erlaubt). Und des Weiteren bleibt es mir verwehrt andere Elemente innerhalb des <tr>-Tags hinzuzufügen. D. h. folgender Code-Fetzen z. B. mit einem hinzugefügten <div>-Element wäre nicht gestattet:

HTML-Code:

<table>
  <tr>
    <td>
	  <input type="radio" id="rad1" value="1" />
	</td>
    <td>
	  <input type="radio" id="rad2" value="2" />
	</td>
	<div ...>
      <td>
	    <input type="radio" id="rad3" value="3" />
	  </td>
	</div>
    <td>
	  <input type="radio" id="rad4" value="4" />
	</td>
  </tr>
</table>

Das Einzige was erlaubt wäre, ist den <table>-Tag und die <input>-Elemente mit Attributen zu bestücken (id, class, style etc.).

Gäbe es unter diesen genannten Einschränkungen trotzdem eine Möglichkeit, die dritte Spalte innerhalb dieser Tabelle mit CSS anzusprechen und individuell anzusprechen?


Vielen Dank für eure Mühen!

Diese Möglichkeit bieten die Selektoren für benachbarte Elemente.

Code css:

1 2 3 4 5 6

table tr td + td + td { /* gilt für das dritte <td> */ background:#ddd; } table tr td + td + td + td {  /* gilt für das vierte <td>, da es vom zweiten aus ebenso das dritte darstellt */ background:none; }

Falls der IE6 hierbei berücksichtigt werden soll, ist für ihn ein Workaround mittels http://code.google.com/p/ie7-js/ erforderlich, da dieser Selektor erst seit dem IE7 interpretiert wird.

Hallo spicelab!

Genau DAS habe ich gesucht.

Und jetzt kommt's:
Deine Antwort um 2:52 Uhr, also noch nicht einmal 1 1/2 Std. nach meinem Eingagspost.

Und ich schlage mich heute den ganzen langen Tag damit rum, da ich vergessen hatte hier noch einmal nach Antworten rein zu schauen.

Letztlich hatte ich es auch schon geschafft, mit Hilfe von JavaScript.

Doch deine Lösung (mit Hilfe von CSS) ist für mich persönlich die viel elegantere Variante. Und genau eine solche CSS-basierte Lösung habe ich gesucht. So einfach kann es manchmal sein...
Ich konnte es nämlich einfach nicht glauben, dass es für solche Fälle keine CSS-Möglichkeit gibt... und du hast mir auch bewiesen, dass ich mit meiner Vermutung nicht falsch lag.


Vielen vielen Dank!