在每组同胞中选择最后一个同胞 [英] Select last sibling in each group of siblings

问题描述

所以我想选择一组元素中的最后一个同级，但是父容器中有多个组.

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>

因此，在这种情况下，对于每个.select元素簇，我需要将padding-top添加到第一个元素，并将padding-bottom添加到最后一个元素.棘手的部分是.select元素的簇可以无限大/小，但是第一个和最后一个元素需要填充.

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.

我无法添加包装器元素，因为这是伪生成的代码. JS还将使它成为一个相当简单的解决方案，但是我宁愿先用完所有仅CSS的解决方案.

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.

HTML结构是100％任意的，因为它将由用户在所见即所得中生成.但是，.select元素的某些部分会彼此相邻.

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.

推荐答案

.wrapper>*:not(.select) + .select, .wrapper>.select + *:not(.select) {
    margin-top: 1em;
}
.wrapper>.select:last-child {
    margin-bottom: 1em;
}

如果定位不是问题，并且在下一个元素上设置margin-top则不行(例如，您在.select上有背景，实际上您需要在组中的最后一项上使用底部填充) ，好吧...您不能选择CSS的上一个兄弟.

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.

这是使用jQuery的解决方案:

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>

这篇关于在每组同胞中选择最后一个同胞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！