Use CSS Combinator Selectors to do 'all but the last'

I’ve been using (descendent combinator) and >(child combinator) heavily, bud did not pay much attention to ~ (general sibling combinator) and + (adjacent sibling combinator).
Today I was making the homepage for TripTime, and I wanted to add a nice dotted gray divider between components:

The Next.js code looks like this:

This time instead of messing with nth-child pseudo class, I used the adjacent sibling combinator to get a quick solution in choosing all .component elements but the last one, and it is as simple as this:

.component + .component {
    border-top: 1px dotted var(--box-shadow-color);
}

This is telling CSS to select all .component elements that are immediately after a .component element (and share the same parent).