当7个或更多孩子时,CSS First Child

Question

所以我有这个查询来获取last-child有7个或更多元素的时间

li:nth-last-child(7) ~ li:last-child {
    background: red;
}

只要存在最少的元素,这适用于任意数量的元素7.我想做的是相反的,得到的first-child.

我尝试了以下内容

li:nth-last-child(7) ~ li:first-child {
    background: red;
}

但这不起作用.奇怪的是,我可以使用以下内容获取第二个子元素

li:nth-last-child(7) ~ li:nth-child(2) {
    background: red;
}

我知道这是非常复杂的CSS,甚至可能不可能,但我想知道它是否可以完成.如果可能的话,我宁愿不使用JS.我猜这是一个挑战;)

Answer 1

通过使用以下选择器,当有7个或更多元素时,可以选择第一个元素:

div:first-child:nth-last-child(n+7) {
  color: red;
}

说明:

• nth-last-child(n+7) - 将选择除最后七个子元素之外的所有元素.当少于七个孩子时,这将不匹配.
• :first-child:nth-last-child(n+7) - 将仅选择与其他部分匹配的元素中的第一个子元素(即,当有七个或更多子元素时,仅选择第一个子元素)

.container > div:first-child:nth-last-child(n+7) {
  color: red;
}

<h3>Has seven children</h3>
<div class='container'>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

<h3>Has six children</h3>
<div class='container'>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

<h3>Has nine children</h3>
<div class='container'>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

小提琴演示(由于某种原因,它不适n+7用于片段)