如何用CSS隐藏CMS生成的、超出7的倍数的末尾子元素？

要实现隐藏总数除以7后余数部分的末尾子元素，可以通过组合使用:nth-child和:nth-last-child选择器，针对余数1到6的所有情况分别匹配目标元素：

/* 余数1：隐藏最后1个元素 */
.parent > :nth-child(n + 8):nth-last-child(-n + 1),
/* 余数2：隐藏最后2个元素 */
.parent > :nth-child(n + 7):nth-last-child(-n + 2),
/* 余数3：隐藏最后3个元素 */
.parent > :nth-child(n + 6):nth-last-child(-n + 3),
/* 余数4：隐藏最后4个元素 */
.parent > :nth-child(n + 5):nth-last-child(-n + 4),
/* 余数5：隐藏最后5个元素 */
.parent > :nth-child(n + 4):nth-last-child(-n + 5),
/* 余数6：隐藏最后6个元素 */
.parent > :nth-child(n + 3):nth-last-child(-n + 6) {
  display: none;
}

原理说明 #

每个选择器规则对应一种余数场景：

• 以余数3（比如10个元素）为例，:nth-child(n + 6)会选中第6个及以后的元素，:nth-last-child(-n + 3)会选中倒数前3个元素，两者的交集就是第8、9、10个元素——也就是需要隐藏的部分。
• 如果子元素总数是7的倍数，所有规则都不会匹配，因此不会隐藏任何元素，完全符合需求。

为什么之前的尝试没成功 #

单独或简单组合:nth-child和:nth-last-child无法覆盖所有余数场景，必须针对1-6的余数分别设置交集选择器，才能精准定位到每个场景下需要隐藏的末尾元素。

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