Koushik Sarkar Koushik Sarkar - 4 months ago 10
HTML Question

How to select siblings between 2 tags of same class using CSS

I have a bunch of table rows

<tr></tr>


Few of which are of
class = "node"


Only one of the
tr.node
will be of
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>


I want to select all the
<tr>
's from
tr.node.active
to next
tr.node
excluding the
tr.node
's themselves.

This question uses jquery
How to select all content between two tags in jQuery

Is there any way of doing this using CSS only, as using javascript would be difficult in the given scenario of my project?

enter image description here

Answer

You need to use CSS3 ~ to selecting all sibling of element.

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>