USS don't apply to last element

Hi there

I am constantly running into an issue where I want to not apply the style to the last element under a parent. For example I have a list of items, I want to add some margin at the bottom of each element to space them apart, but I do not want the last element to have a margin under it.

Basically, I want to add a small space between elements:
Currently I have something like a USS class called Table, and another selector called .Table > * which adds 5px margin to the bottom of the element. But last element always has 5x margin, too:

[Parent (Table)]
[element]
[space due to 5x margin]
[element]
[space due to 5x margin]
[element]
[space due to 5x margin]

This is something I keep running into again and again. Any ideas?

In CSS:

We don’t support the CSS features mentioned in the stackoverflow link there yet in USS. What I recommend for USS is to accept the 5px margin on the last child and use the parent container’s bottom padding to eat the last child’s margin. So if you have a 5px padding around all children inside your table parent, remove the 5px padding just on the bottom. If you were already at 0px padding in table, you can use -5px padding to eat the last child’s margin.

1 Like