Autor |
Nachricht |
rodemund
Threadersteller
Dabei seit: 27.03.2012
Ort: -
Alter: 61
Geschlecht:
|
Verfasst Mo 03.09.2012 17:46
Titel CSS Selektor bauen für TR-tag mit zwei Klassen |
|
|
Also, vllt seht ich's nicht ...
folgende Aufgabe:
Ich habe eine Tabelle. Das ist eine Liste von TR-tags.
Diese TR-tags tragen abwechselnd die Klassen "sisrow1" und "sisrow2"
- für eine tabelle mit z.B. unterschiedlich eingefärbten Zeilen.
Manche tr-tags tragen zusätzlich die Klasse "myteam".
An diesem Code kann ich nicht drehen. Der ist vorgegeben.
Code: |
<div class="spielplan">
<table class="sistable">
<tr>
<th>Nr</th>
<th>Datum</th>
<th>Zeit</th>
<th>Heim</th>
<th>Gast</th>
</tr>
<tr class="sisrow1">
<td>unterdrücken</td>
</tr>
<tr class="rowHalle sisrow1">
<td colspan="5">unterdrücken</td>
</tr>
<tr class="sisrow2">
<td>unterdrücken</td>
</tr>
<tr class="rowHalle sisrow2">
<td colspan="5">unterdrücken</td>
</tr>
<tr class="sisrow1 myteam">
<td>Dies soll angezeigt werden</td>
</tr>
<tr class="rowHalle sisrow1 myteam">
<td colspan="5">Dies soll angezeigt werden</td>
</tr>
<tr class="sisrow2">
<td>unterdrücken</td>
</tr>
<tr class="rowHalle sisrow2">
<td colspan="5">unterdrücken</td>
</tr>
</table>
</div>
|
Schreiben kann ich aber die CSS.
Nun will ich erreichen, das alle Zeilen unterdrückt werden, die die die Klasse "sisrow1" oder "sisrow2" tragen.
NICHT unterdrückt sollen dabei die Zeilen werden, die darüber hinaus die Klasse "myteam" tragen.
Die Idee:
Erst schalte ich alle Zeilen "sisrow1"/"sisrow2" ab.
Dann schalte ich "myteam" wieder an.
funzt aber iwie nicht
Code: |
div.spielplan table.sistable tbody tr.sisrow1,
div.spielplan table.sistable tbody tr.sisrow2
{
display:none;
}
div.spielplan table.sistable tbody tr.myteam
{
display:compact; /* oder auch display:inline; was auch immer ... */
}
|
Ausschalten geht ganz wunderbar, selektiert auch schön auf .spielplan (es gibt noch eine Tabelle, aber die soll unberührt bleiben - funzt auch), aber einschalten ist nicht ...
Da der zweite (Einschalt-)Selektor nach den ersten Selektoren eingelesen wird, sollte er doch diese überschreiben - oder?
Oder kann ich irgendwie andere Selektoren dafür bauen?
Ratsuchend und für jeden Tip dankbar:
Rotfrosch
|
|
|
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mo 03.09.2012 18:10
Titel
|
|
|
Auf den ersten Blick sind mir 2 Sachen gekommen...
1. Da nimmt man doch table-row?
2. Er könnts auch mitm CSS3 :not() versuchen
|
|
|
|
|
Anzeige
|
|
|
rodemund
Threadersteller
Dabei seit: 27.03.2012
Ort: -
Alter: 61
Geschlecht:
|
Verfasst Mo 03.09.2012 18:19
Titel
|
|
|
fyll hat geschrieben: | Da nimmt man doch table-row? |
Seltsam - mit "table-row" macht er genau, was ich möchte
und ich könnt’ schwören, ich hätt’s probiert. Wie man sich täuschen kann.
Alles klar. Dankeschön. Thread bitte zunageln.
|
|
|
|
|
|
|
|
Ähnliche Themen |
JavaScript toggle mit zwei verschiedenen Klassen
Zwei CSS-Klassen auf einem Tag in E-Mail-Newsletter
CSS: links in klassen definieren -pseudoklassen in klassen?
ID-Selektor mit Punkt
Rücklaufender CSS-Selektor?
[CSS] Attributabhängige Selektor p[Attribut]
|
|