How to highlight parent table row based on table header attribute - html

Question

I want to change the color for the entire table row (using CSS) when the table header has an attribute of commit="123". I've tried this:
[commit="123"] {
color:#aaffff;
background-color:#111111;
}
However, this only changes the table header (1). How can I select the entire table row (1 entry 1) in which the table header has commit set to "123"? Thanks!
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr>
<th id="1" commit="123">1</th>
<td>
<i>entry 1</i>
</td>
</tr>
<tr>
<th id="2" commit="456">2</th>
<td>
<i>entry 2</i>
</td>
</tr>
</tbody>
</table>

Answer 1

Why not just apply the commit to the table rows instead of the table header? Unfortunately CSS does not currently support reverse selectors for parents.
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr id="1" commit="123">
<th>1</th>
<td>
<i>entry 1</i>
</td>
</tr>
<tr id="2" commit="456">
<th>2</th>
<td>
<i>entry 2</i>
</td>
</tr>
</tbody>

Answer 2

Instead of adding commit to table headers (i.e.) th you need to write it in to achieve your requirement.
Hope this helps.

Answer 3

You could use the general sibling combinator (~) to select all following tds in the row.
This won't style the tr, there is no CSS selector that can do as you wish, but you could achieve a similar effect in this way.
[commit="123"],
[commit="123"]~td {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbody>
<tr>
<th id="1" commit="123">1</th>
<td>
<i>entry 1</i>
</td>
<td>
<i>entry 1.2</i>
</td>
</tr>
<tr>
<th id="2" commit="456">2</th>
<td>
<i>entry 2</i>
</td>
<td>
<i>entry 2.2</i>
</td>
</tr>
</table>