Data List (.c-data-list) Items that Span Multiple Rows

[wesleyboar]

Goal

Add tr.c-data-list__row--start-final (from Pre-Prod Digital Rocks) into Core-Styles table.c-data-list.

Reference

Used on Project #317 Origin Data 826.

Content as of:

2025-02-20 12:40 CST

/* to use one background color for all final rows */
tr.c-data-list__row--start-final:nth-child(odd) :is(th, td),
tr.c-data-list__row--start-final:nth-child(odd) ~ tr :is(th, td) {
    background: var(--global-color-background--app);
}
tr.c-data-list__row--start-final:nth-child(even) :is(th, td),
tr.c-data-list__row--start-final:nth-child(even) ~ tr :is(th, td) {
    background: var(--global-color-primary--x-light);
}

UI

table	row with class	an affected element