Sibling css selector not changing

Question

All tr with ID 1 and all under them, before ID 2 should be the same color. Check the example. But it will not change after ID 2.

This is my code:

[id="1"], [id="1"] ~ tr {
  background-color: blue;
}
[id="2"], [id="2"] ~ tr {
  background-color: red;
}

<table>
    <tbody>
        <tr id="1"><td>foo</td></tr>  <!-- Blue -->
        <tr><td>foo</td></tr>         <!-- Blue -->
        <tr><td>foo</td></tr>         <!-- Blue -->
        <tr id="2"><td>foo</td></tr>  <!-- Red -->
        <tr><td>foo</td></tr>         <!-- Red -->
        <tr id="1"><td>foo</td></tr>  <!-- Blue (But is Red) -->
        <tr><td>foo</td></tr>         <!-- Blue (But is Red) -->
        <tr><td>foo</td></tr>         <!-- Blue (But is Red) -->
        <tr><td>foo</td></tr>         <!-- Blue (But is Red) -->
    </tbody>
</table>

`id` of element in `document` should be unique. – guest271314 Aug 31 '16 at 22:11 — guest271314, Aug 31 '16 at 22:11

guest271314 · Accepted Answer · 2016-09-01T03:09:00.390

Given html at Question you can use adjacent sibling selector +, !important

[class="1"],
[class="1"] ~ tr {
  background-color: blue;
}

[class="2"],
[class="2"] + tr {
  background-color: red !important;
}

<table>
  <tbody>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="2">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
  </tbody>
</table>

alternatively, using jQuery's .nextUntil(), .add()

$(".1").nextUntil(".2").add(".1").addClass("blue");
$(".2").nextUntil(".blue").add(".2").addClass("red");

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="2">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="1">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
  </tbody>
</table>

That html was just example, the code continues with 300 more rows and different sizes. So this solution doesnt work — Stefan, Aug 31 '16 at 22:39
There is probably an approach using `css` only which could achieve expected result. Will try to update Answer with a `javascript` approach — guest271314, Aug 31 '16 at 22:48
Thank you, i have tried this all day without success, once solved it will be big relief! — Stefan, Aug 31 '16 at 22:51

score 0 · Answer 2 · answered Aug 31 '16 at 22:14

Just keep it simple. Style the table with the blue cells as default and use a red class to override where required.

.example-table td {
  background-color: blue;
}

.example-table .red td {
  background-color: red;
}

<table class="example-table">
  <tbody>
    <tr>
      <td>foo</td>
    </tr>
    <tr >
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr class="red">
      <td>foo</td>
    </tr>
    <tr class="red">
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
    </tr>
  </tbody>
</table>

The 'problem' with your code is that the tr without any id in between id=1 and id=2 will be blue, when it should be red. — Stefan, Aug 31 '16 at 22:20

Sibling css selector not changing

2 Answers2