Wie Geschwister zwischen 2 Tags von derselben Klasse wählen CSS

Question

Ich habe eine Reihe von Tabellenzeilen <tr></tr>

Nur wenige davon sind von class = "node"

Nur einer der tr.node von sein wird class = "active"

<tr class="node">...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr class="node">...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr class="node active">...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr class="node">...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr class="node">...</tr> 

Ich möchte alle <tr> 's von tr.node.active bis nächste tr.node mit Ausnahme der tr.node selbst auswählen.

Diese Frage verwendet jquery How to select all content between two tags in jQuery

Gibt es eine Möglichkeit, dies zu tun nur mit CSS, wie die Verwendung würde Javascript in dem gegebenen Szenario meines Projektes schwierig sein?

Answer 1

Sie müssen ~ CSS3 verwenden, um alle Geschwister des Elements auswählen.

tr.node.active ~ tr { 
 
    color: red; 
 
} 
 

 
tr.node.active ~ tr.node, 
 
tr.node.active ~ tr.node ~ tr { 
 
    color: black; 
 
}

<table> 
 
    <tr class="node"><td>node</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr class="node active"><td>node active</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr class="node"><td>node</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr><td>tr</td></tr> 
 
    <tr class="node"><td>node</td></tr> 
 
</table>