I have a table where a CSS class is added when a row or column meets a condition. The class for the row (technically cell) element <td>
overrides the column element <tr>
.
This is the generated HTML
<table>
<tr data-v-5cc42bfc="" item-index="1" render="true" class="row-title-1">
<td data-v-5cc42bfc="">Ahmad Ortiz Jr.</td>
<td data-v-5cc42bfc="" class="center aligned column-total">lkulas@example.com</td>
<td data-v-5cc42bfc="">1</td>
<td data-v-5cc42bfc="">1992-09-12 00:00:00</td>
<td data-v-5cc42bfc="">in</td>
<td data-v-5cc42bfc="">F</td>
</tr>
</table>
The SCSS code
.column-total {
background-color: #e0e0e0;
}
.row-title-1 {
background-color: #699dcd;
}
And the complete reproducible example at https://codepen.io/hanxue/pen/GxwXdG
The column style will override the row style
Workaround
It is possible to solve the problem by having more specific styling, for example:
.row-title-1 {
background-color: #699dcd;
.column-total {
background-color: #699dcd;
}
}
.row-title-2 {
background-color: #89b2d8;
.column-total {
background-color: #699dcd;
}
}
.row-title-3 {
background-color: #a1c7e4;
.column-total {
background-color: #699dcd;
}
}
.column-total {
background-color: #e0e0e0;
}
The problem is this approach is not scalable and gets convoluted quickly as the number of row and column styles increases.
Question
Is there any way for a parent element's style to override its child element?