Selector для братьев и сестер конкретного элемента, которые соответствуют условию

Question

У меня есть следующий сценарий:

<table> 
    <tr class="header"> 
    <tr class="data1"> 
    <tr class="data2"> 
    <tr class="data3"> 
    <tr class="header"> 
    <tr class="data1"> 
    <tr class="data2"> 
</table> 

Я хочу, чтобы изменить цвет текста на data элементов под первым коллектором на синий, и data элементы под второй заголовок - красный.

Я пробовал различные nth-child и соседний родственный (+), но все мои попытки неполны.

tr[class^=data] получает все элементы, которые я хочу затронуть, но мне они нужны в двух группах.

Я не знаю, сколько data элементов у меня будет, я знаю, у меня есть только 2 header

Я не могу использовать JavaScript/JQuery здесь, только селекторы

Answer 1

Если вы знаете, что вы будете иметь только две строки заголовка, вы можете просто стили для второго набора строк данных переопределяют первый набор строк данных:

.header ~ tr[class^=data] { 
    color: #f00; 
} 

.header ~ .header ~ tr[class^=data] { 
    color: #00f; 
} 

Если вы можете изменить HTML , Просто группировать заголовка и данных строк в TBODY элементы и вам не придется беспокоиться о тщательно выбирая только строки, связанные с каждым заголовком:

tbody:first-child td { 
 
    color: #f00; 
 
} 
 

 
tbody:last-child td { 
 
    color: #00f; 
 
}

<table> 
 
    <tbody> 
 
    <tr class="header"><th>Header 
 
    <tr class="data1"><td>Data1 
 
    <tr class="data2"><td>Data2 
 
    <tr class="data3"><td>Data3 
 
    <tbody> 
 
    <tr class="header"><th>Header 
 
    <tr class="data1"><td>Data1 
 
    <tr class="data2"><td>Data2 
 
</table>

Answer 2

.header ~ [class^="data"] { 
    background-color: red; 
} 
.header ~ .header ~ [class^="data"] { 
    background-color: blue; 
}