I am encountering an issue with my table layout. The structure is similar to the following:
<tbody>
<tr class="row">...</tr>
<tr class="row--expanded">...</tr>
<tr class="row">...</tr>
<tr class="row--expandable">...</tr>
<tr class="row">...</tr>
<tr class="row">...</tr>
<tr class="row--expanded">...</tr>
</tbody>
The table contains rows that can be expanded, but not every row has this feature. I initially applied a zebra style by using the CSS selector tbody tr:nth-child(even). However, this approach doesn't work as expected now that I have added expandable rows. How can I modify the CSS to apply the nth-child(even) styling only to elements with the class of .row?
tbody {
.row:nth-child(even) {
...
}
}