Alla celler utom den första

Jag har en tabell som ser ut ungefär så här:

<table class="list" border="1">
	<tr class="head">
		<td colspan="2">Heading 1</td>
	</tr>
	<tr>
		<td><b>Importer</b></td>
		<td>Importer name</td>
	</tr>
	<tr>
		<td><b>Dealer</b></td>
		<td>Dealer name</td>
	</tr>
	<tr class="head">
		<td colspan="2">Heading 2</td>
	</tr>
	<tr>
		<td><b>Delivering importer</b></td>
		<td>Delivering importer name</td>
	</tr>
	<tr>
		<td><b>Delivering dealer</b></td>
		<td>Delivering dealer name</td>
	</tr>
	<tr class="head">
		<td colspan="2">Heading 3</td>
	</tr>
	<tr>
		<td><b>Shipping importer</b></td>
		<td>Shipping importer name</td>
	</tr>
	<tr>
		<td><b>Shipping dealer</b></td>
		<td>Shipping dealer name</td>
	</tr>
</table>

Finns det något sätt att med CSS komma åt cellerna med "Heading 2" och "Heading 3" och t.ex. ändra bakgrundfärg? Jag vill alltså hitta alla celler som har classen "head" förutom den som ligger överst i classen "list".

Jag vill inte lägga någon egen class på cellerna och det måste funka in Explorer 5.5+.

Först så skulle jag vilja finslipa tabellen lite:

<table class="list">
 <tbody>
  <tr>
   <th scope="col" colspan="2">Heading 1</td>
  </tr>
  <tr>
   <th scope="row">Importer</th>
   <td>Importer name</td>
  </tr>
  <tr>
   <th scope="row">Dealer</th>
   <td>Dealer name</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th scope="col" colspan="2">Heading 2</th>
  </tr>
  <tr>
   <th scope="row">Delivering importer</th>
   <td>Delivering importer name</td>
  </tr>
  <tr>
   <th scope="row">Delivering dealer</th>
   <td>Delivering dealer name</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th scope="col" colspan="2">Heading 3</th>
  </tr>
  <tr>
   <th scope="row">Shipping importer</th>
   <td>Shipping importer name</td>
  </tr>
  <tr>
   <th scope="row">Shipping dealer</th>
   <td>Shipping dealer name</td>
  </tr>
 </tbody>
</table>

Sen kan man använda föjlande CSS:

.list { border:thin outset; }
.list th,
.list td { border:thin inset; }
.list th { text-align:left; }
.list th[scope=col] { font-weight:normal; background:lime; }
.list tbody:first-child th[scope=col] { background:transparent; }

...men om det ska funka i IE så får du nog använda class="" eftersom den webbläsaren har så dåligt stöd för selektorer, eller på nåt sätt lösa det med javascript. :)

Ja, funkar det inte inte i IE5.5+ så hjälper det tyvärr inte mig ett skit. ;)

Kanske Dean Edwards IE7 kan vara till nytta?

Kan du inte bara kopiera "head" classen och döpa om det till "head2" resp. "head3" och ändra bakgrundsfärgen i varje class till det du ville ha?
I koden blir det:

<tr class="head">
.....
<tr class="head2">
.....
<tr class="head3">

Bara en tanke.. är ingen expert på det här måste jag säga.

Orient skrev:

Kan du inte bara kopiera "head" classen och döpa om det till "head2" resp. "head3" och ändra bakgrundsfärgen i varje class till det du ville ha?
I koden blir det:

<tr class="head">
.....
<tr class="head2">
.....
<tr class="head3">

Bara en tanke.. är ingen expert på det här måste jag säga.

Jag vill egentligen behålla min HTML-kod precis som den är och bara ändra i CSS:en. Men det ser mörkt ut. :(

Ja, du blir nog tvungen att använda javascript.

<style type="text/css">
 .list .head { background:lime; }
 .list .first { background:transparent; }
</style>
<script type="text/javascript">
 window.onload = function() {
   var tables = document.getElementsByTagName("TABLE");
   for (var i = 0, len = tables.length; i < len; ++i) {
     var t = tables[i];
     if (t.className == "list") {
       t.getElementsByTagName("TR")[0].className += " first";
     }
   }
 }
</script>