Ability to skip an element with divide- (or space- for that matter)

[stuyam]

I see a variations of this has already been discussed with in this issue with space- #1598

It would be interesting if there was something like divide-y-skip or something to skip the borders adjacent to an element.
I know that technically divide-y adds a border to the top edge of every child except the first. However I think the implementation could skip the current elements and the next elements border so that it gives the element with the skip on it the freedom to add borders to any of its 2 sides top or bottom. Could be something like this:

.divide-y > *:not(.divide-y-skip) + *:not(.divide-y-skip) { }

I noticed divide- and space- already have a :not(template) so could just add to that.

I think the same thing is applicable for space- because it gives the current element the ability to control its edges. This makes it easier to programmatically do something like the example I have below because you can control on the element itself and not have to keep track of data to also skip the next element in a loop for example.

Here is my real example where it is breaking. The green border is meant to be continuous. The border on the element below it is being a problem:

Again, I know that technically space-x-4 adds 1rem of margin-left to every element except the first. But conceptually the space is just meant to space out the elements, so I think a skip wouldn't just skip the space to the left of an element, it would skip both sides. This also is a great argument for why the * + * is so much better than :first-child because it would not be possible to implement something like this without it.

Here is a codepen with some example ideas: https://codepen.io/stuyam/pen/dyMwzym

Keep up the good work! 🎉

[stuyam]

I see that the syntax was changed from a + to a ~. Im guessing that was for the :not(template) so would have to think through that since that changes how that would work I think.