如何在grid容器最后一行项目少于7个时选中该容器

一、JavaScript 实现（推荐） #

目前CSS没有父选择器，没法直接根据子元素数量判断来选中父容器，用JS是最直接靠谱的方法。

实现步骤： #

• 获取Grid容器和里面的项目总数
• 计算最后一行的项目数：用总数量对每行10个取余，余数为0的话最后一行就是10个，否则余数就是最后一行的数量
• 如果最后一行数量小于7，给容器加个自定义类名，之后就能通过这个类名写样式了

代码示例： #

CSS（新增自定义类样式）

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: span 1;
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

/* 最后一行少于7个时的容器样式 */
.container.last-row-few {
  border: 2px solid #ff4444;
  /* 这里可以加你需要的任何样式 */
}

JavaScript

const container = document.querySelector('.container');
const totalItems = container.children.length;
const itemsPerRow = 10;
// 计算最后一行数量：余数为0时最后一行是满的10个
const lastRowItems = totalItems % itemsPerRow || itemsPerRow;

if (lastRowItems < 7) {
  container.classList.add('last-row-few');
}

要是你的项目是动态加载的，记得在加载完成后重新跑一遍这段判断代码。

二、纯CSS 间接实现（仅能改最后一行项目样式） #

如果只是想调整最后一行项目的样式，而非容器本身，可以用CSS选择器实现，但没法直接给容器加样式：

/* 当最后一行剩下1-6个项目时，选中这些项目 */
.container .item:nth-last-child(-n+6):nth-child(10n+1),
.container .item:nth-last-child(-n+6):nth-child(10n+1) ~ .item {
  background-color: #ffebee;
}

内容的提问来源于stack exchange，提问作者SyndRain