nicht angemeldet
>-Operator bei Tabellenzeilen
Gunnar BittersmannHallö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ürden auch formatiert, aber das ist nicht erwü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?
-
@@Flow:
nuqneH
ich möchte eine Tabellenzeile (tr-Tag) mit CSS formatieren, aber nur, wenn sie sich direkt unterhalb des table-Tags einer bestimmten Klasse befindet.
„Tags“ klingt doch cool? Nein.
Ein tr-Element ist in HTML niemals direkt unterhalb eines table-Elements:
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>Nostradamus (die Archivsuche danach) erzählt Näheres.
Deshalb greift ein Selektor
table>trimmer ins Leere.Dabei dachte ich an den >-Operator
Da wird auch nicht operiert, sondern kombiniert. [CSS21 §5.6, CSS3SEL §8.2]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@ nuqneH
Danke für die Antwort, so etwas hatte ich mir schon gedacht. Hab das Problem jetzt mit einem Workaround gelöst.
Die nebensächlichen Hinweise werd ich mir hoffentlich auch merken :)
-
@@Flow:
nuqneH
@ nuqneH
??
Hab das Problem jetzt mit einem Workaround gelöst.
Der da wäre? „Workaround“ lässt Schlimmes vermuten.
Die nebensächlichen Hinweise werd ich mir hoffentlich auch merken :)
Andernfalls werde ich dich wieder daran erinnern. ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-