隐藏 7 的倍数之后的第 n 个子项目

Question

所以我从 cms 中设置了物品，并且无法控制它们的数量。

我想使用 css 隐藏超过 7 倍数的所有项目，但只隐藏最后几个。

即如果有 10 个项目我需要隐藏最后 3 个，如果有 22 个项目我需要隐藏最后一个...（除以 7 后的余数）。

我尝试了第 n 个孩子和第 n 个最后孩子的组合，但还没有接近！

Answer 1

您需要涵盖很多案例。更准确地说，根据

(7n + 1)

项目的位置，您有 6 种不同的情况。

.box {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 10px;
  margin: 5px;
  border: 1px solid;
}

.box div {
  height: 20px;
  background: red;
}

.box :nth-child(7n + 1):nth-last-child(1),
.box :nth-child(7n + 1):nth-last-child(2),
.box :nth-child(7n + 1):nth-last-child(2) ~ *,
.box :nth-child(7n + 1):nth-last-child(3),
.box :nth-child(7n + 1):nth-last-child(3) ~ *,
.box :nth-child(7n + 1):nth-last-child(4),
.box :nth-child(7n + 1):nth-last-child(4) ~ *,
.box :nth-child(7n + 1):nth-last-child(5),
.box :nth-child(7n + 1):nth-last-child(5) ~ *,
.box :nth-child(7n + 1):nth-last-child(6),
.box :nth-child(7n + 1):nth-last-child(6) ~ * {
  display: none;
}

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>