Flow: >-Operator bei Tabellenzeilen

Beitrag lesen

Hallöchen,

ich möchte eine Tabellenzeile (tr-Tag) mit CSS formatieren, aber nur, wenn sie sich direkt unterhalb des table-Tags einer bestimmten Klasse befindet.

Innerhalb einer anderen Tabelle -- die mitunter einer Tabelle der gewünschten Klasse untergeordnet sein kann -- soll das tr-Tag nicht formatiert werden.

Dabei dachte ich an den >-Operator, doch das funktioniert nicht. Und wenn ich den Leerzeichenoperator nehme, werden alle tr's formatiert, unabhängig wie tief sie innerhalb der gewünschten Tabelle liegen.

Ein kleines Beispiel wie ich die Struktur meine:

<html>  
	<head>  
		<title>Testdatei</title>  
  
		<style type="text/css">  
		/* <![CDATA[ */  
			table  
			{  
				width: 500px;  
  
				border: none;  
				border-spacing: 0;  
			}  
  
			/* So werden absolut alle tr's, die innerhalb von t1 liegen, formatiert */  
			table.t1 tr  
			{  
				background-color: green;  
			}  
			/* Dies funktioniert gar nicht erst */  
			table.t2 > tr  
			{  
				background-color: red;  
			}  
		/* ]]> */  
		</style>  
	</head>  
  
	<body>  
		<table class="t1">  
			<tr>  
				<td>Tabelle</td>  
				<td>1</td>  
			</tr>  
			<tr>  
				<td colspan="2">  
					<table>  
						<tr>  
							<td>Tabelle in Tabelle 1</td>  
						</tr>  
						<tr>  
							<td>Diese tr's w&uuml;rden auch formatiert, aber das ist nicht erw&uuml;nscht!</td>  
						</tr>  
					</table>  
				</td>  
			</tr>  
		</table>  
		<table class="t2">  
			<tr>  
				<td>Tabelle</td>  
				<td>2</td>  
			</tr>  
			<tr>  
				<td colspan="2">  
					Formatierung der tr's funktioniert gar nicht!  
				</td>  
			</tr>  
		</table>  
	</body>  
</html>

Was habe ich da beim >-Operator falsch verstanden? Gibt es sonst eine Möglichkeit, nur auf die direkten tr-Kinder einer Tabelle zuzugreifen?