By day I’m currently working on our Design System’s Table component. In order to achieve a design spec where the table has no bottom-border I needed to set:
- all cells in the final row of the
<tfoot>to have no bottom-border; but also - if there is no
<tfoot>then set all cells in the final row of the<tbody>to have no bottom-border.
Modern CSS’s support for writing selectors which traverse the DOM up, down and sideways is pretty amazing here.
I’ve gone with:
tfoot > :last-child td,
tbody:not(:has(+ tfoot)) > :last-child td {
border-bottom-width: 0;
}
(Some BEM stuff renamed for brevity but that’s the gist of it)
In the past we’ve had to bloat the backend layer with complex and awkward logic that adds “convenience classes” like .fe-Table-bodyLastRow but as Eric Meyer has been saying :has() in particular is going to remove the need for those convenience classes.
Hat-tip to Jhey Tompkins for his excellent recent article on :has which was a great help.