Select last sibling in each group of siblings - css

Question

So I want to select the last sibling in a group of elements, but there are more than one group in the parent container.
<div class="wrapper">
<div class="select"></div><!-- padding-top -->
<div class="select"></div>
<div class="select"></div><!-- padding-bottom -->
<p>Some text</p>
<div class="select"></div><!-- padding-top -->
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div><!-- padding-bottom -->
<div>
So in this case, for every clump of .select elements, I need to add padding-top to the first one and padding-bottom to the last one. The tricky part is that the clump of .select elements can be infinitely large/small, but the first and last elements need padding.
This example works for the top padding...
// add padding-top to all elements
.select {
padding-top: 1em;
}
// remove it for general direct siblings
.select + .select {
padding-top: 0;
}
// this will only add to the last .select in the parent container,
// not the last in each clump of .select elements
.select + .select:last-of-type {
padding-bottom: 1em;
}
But the bottom padding for the last element in the clump is what I'm having issues with.
I can't add wrapper elements because this is pseudo generated code. JS would also make this a fairly straightforward solution, but I'd rather exhaust all of my CSS only solutions first.
Edit: The HTML structure is 100% arbitrary as it will be generated by the user in a WYSIWYG. However, there will be some sections of .select elements next to each other.

Answer 1

.wrapper>*:not(.select) + .select, .wrapper>.select + *:not(.select) {
margin-top: 1em;
}
.wrapper>.select:last-child {
margin-bottom: 1em;
}
If positioning was not the issue, and setting a margin-top on the next element doesn't do it (for example you have a background on .select and you actually need bottom padding on the last item in the group), well... you can't select the previous sibling with CSS.
So here's a solution using jQuery:
$('.wrapper>*:not(.select)').each(function() {
$(this).prev(".select").css({
'padding-bottom': '20px'
})
})
body {
margin: 0;
}
.wrapper {
padding: 20px;
}
.select {
background-color: #eee;
border-bottom: 1px solid white;
}
/* ignore CSS above, it's for coloring and padding so you see elements */
.select {
padding-top: 20px;
}
.select ~ .select {
padding-top: 0;
}
*:not(.select) + .select {
padding-top: 20px;
}
.wrapper>.select:last-child {
padding-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="select">select</div>
<!-- padding-top -->
<div class="select">select</div>
<div class="select">select</div>
<!-- padding-bottom -->
<p>Some text</p>
<div class="select">select</div>
<!-- padding-top -->
<div class="select">select</div>
<div class="select">select</div>
<div class="select">select</div>
<div class="select">select</div>
<!-- padding-bottom -->
</div>

Answer 2

Old question, I know, but I just had the same problem so thought this might be helpful for someone. Using :not() worked for me; I used borders instead of paddings for the example so it's more visible.
.wrapper * {
margin: 0;
padding: 0;
}
.select {
border-top: 30px solid #f00;
}
.select:last-of-type {
border-bottom: 30px solid #f00;
}
.select + .select {
border-top: 0;
}
.select + :not(.select) {
border-top: 30px solid #f00;
}
<div class="wrapper">
<div class="select">Select 1</div><!-- padding-top -->
<div class="select">Select 2</div>
<div class="select">Select 3</div><!-- padding-bottom -->
<p>Some text</p>
<div class="select">Select 4</div><!-- padding-top -->
<div class="select">Select 5</div>
<div class="select">Select 6</div>
<div class="select">Select 7</div>
<div class="select">Select 8</div><!-- padding-bottom -->
<div>

Answer 3

Is the structure always 2 groups of div separated by a p?
And is the padding meant to create space at top/bottom of each group?
And if so, would margin be okay instead?
Then here is a sample doing like so.
.wrapper div:first-child,
.wrapper p {
margin-top: 20px;
}
.wrapper div:last-child,
.wrapper p {
margin-bottom: 20px;
}
/* just for coloring making it visible */
.wrapper {
background-color: #666;
border: 1px solid black;
}
.wrapper p,
.select {
background-color: #aaa;
border: 1px solid white;
}
<div class="wrapper">
<div class="select">1</div><!-- padding-top -->
<div class="select">2</div>
<div class="select">3</div><!-- padding-bottom -->
<p>Some text</p>
<div class="select">1</div><!-- padding-top -->
<div class="select">2</div>
<div class="select">3</div>
<div class="select">4</div>
<div class="select">5</div><!-- padding-bottom -->
<div>
If it needs to be padding and you don't want to use script, this might work.
.wrapper div:first-child {
padding-top: 20px;
}
.wrapper div:last-of-type {
padding-bottom: 20px;
}
/* just for coloring making it visible */
.wrapper {
border: 1px solid black;
background-color: #666;
}
.wrapper p,
.select {
background-color: #aaa;
border: 1px solid white;
}
<div class="wrapper">
<div class="select">1</div>
<div class="select">2</div>
<div class="select">3</div>
<p>Some text</p>
</div>
<div class="wrapper">
<div class="select">1</div>
<div class="select">2</div>
<div class="select">3</div>
<div class="select">4</div>
<div class="select">5</div>
</div>

Answer 4

I don't think you need to touch the .select elements, just add padding top and bottom to the .wrapper, and margins top and bottom to the p