CSS第一个孩子时，7个或更多孩子

所以我有这个疑问得到last-child时，有7个以上的元素CSS第一个孩子时，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。我想这是一个挑战;）

来源

2015-11-06 Alex McCabe

*（出于某种原因，它不与片段n+7工作），奇怪的是我能得到第二子元素全光照g以下*你可以创建它的演示吗？ –

@ManojKumar现在这个问题已经回答了一个接受的答案。欣赏你的评论时间。 –

可以选择第一元件，当有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>

Fiddle Demo

来源

2015-11-06 10:23:51 Harry

我可以吻你，我不会，但我可以。考虑这个问题的答案。谢谢。为我节省了一大笔麻烦。显然我的思维方式比我想象的要复杂得多。 –

@AlexMcCabe：不客气朋友:)我喜欢这些问题。 – Harry

-1

第一个元素，你可以使用你的CSS中的第一个类型。例如：

p:first-of-type { 
     background: #ff0000; 
    }

来源

2015-11-06 10:19:34

好吧，请在给出任何答案之前阅读问题..OP没有问如何给第一个孩子颜色。不要担心，我没有放弃投票.. –

我举了一个例子，这个平台的含义是不给人们答案，但让他们尝试和学习..我只是想给出一个可能的方式，它可以解决。 –

不幸的是，这只能让我成为所有情况下的第一个孩子。 –

CSS第一个孩子时，7个或更多孩子

回答

相关问题