CSS第一个孩子，当7个或更多的孩子 [英] CSS First Child when 7 or more children

问题描述

所以我有这个查询，当有7个或更多的元素时，得到 last-child

  li：nth-​​last-child（7）〜li：last-child {
 background：red; 
} 
  

这适用于任何数量的元素， code> 7 。我想做的是相反的，得到第一胎。

我试过下面的

  li：nth-​​last-child（7）〜li：first-child {
 background：red; 
} 
  

但这不行。奇怪的是我可以使用下面的

获得第二个子元素

  li：nth-​​last-child（7）〜li： child（2）{
 background：red; 
} 
  

我知道这是非常复杂的CSS，甚至可能不可能，我想知道是否可以做到。我宁愿不使用JS如果可能的话。 ）

解决方案

您可以选择第一个元素，当有7个或更多的元素时，使用

  div：first-child：nth-​​last-child（n + 7）{
 color：红; 
} 
  

说明： b

• nth-last-child（n + 7） - 将选择除了最后七个子元素之外的所有子元素。当有少于7个孩子，这将匹配没有。


• ：first-child：nth-​​last-child（n + 7） - 只选择第一个元素

class =snippetdata-lang =jsdata-hide =false>

  .container> div：first-child：nth-​​last-child（n + 7）{color：red;}  

 < h3>有七个孩子< / 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>有六个孩子< / h3>< div class ='container'> < div> Test< / div> < div> Test< / div> < div> Test< / div> < div> Test< / div> < div> Test< / div> < div> Test< / div>< / div>< h3>有九个孩子< / h3>< div class ='container'> < div> Test< / div> < div> Test< / div> < div> Test< / div> < div>测试< / div> < div> Test< / div> < div> Test< / div> < div> Test< / div> < div> Test< / div> < div> Test< / div>< / div>  

小提示演示（由于某种原因，它不能使用 n + 7 in snippet）

So I have this query to get the last-child when there are 7 or more elements

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

This works for any number of elements as long as there is a minimum of 7. What I want to do is the opposite, get the first-child.

I tried the following

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

But that does not work. Strangely I can get the second child element using the following

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

I know this is pretty complex CSS, and may not even be possible, but I am wondering if it can be done. I'd rather not use JS if at all possible. I guess treat this as a challenge ;)

解决方案

You can select the first element when there are 7 or more elements by using the below selector:

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

Explanation:

• nth-last-child(n+7) - Will select all but the last seven child elements. When there are less than seven children, this will match none.
• :first-child:nth-last-child(n+7) - Will select only the element which is also the first child among the elements which match the other part (which is, select only first child when there are seven or more children)

.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>

Fiddle Demo (For some reason it is not working with n+7 in snippet)

这篇关于CSS第一个孩子，当7个或更多的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！