如何選擇混合容器中的第一個孩子/最後一個孩子？

我可以選擇一個班級的第一個和最後一個孩子，這個孩子有不同班級的孩子嗎？如何選擇混合容器中的第一個孩子/最後一個孩子？

例如：

<div class="main"> 
    <div class="red"></div> 
    <div class="red"></div> 
    <div class="red"></div> 

    <div class="black"></div> 
    <div class="black"></div> 
    <div class="black"></div> 

    <div class="green"></div> 
    <div class="green"></div> 
    <div class="green"></div> 
</div>

我要選擇的第一子和.black最後孩子。那可能嗎？

來源

2013-10-17 Sami A.

你要選擇的第一個。黑的第一個孩子，而最後。黑的最後一個子或每個。黑的第一個和最後一個孩子？ – ohmusama

使用nth-child或nth-of-type結合類選擇器。

Live Example

.main .black:nth-child(2n) { 
    color: yellow; 
}

或者，如果你想他們是獨立的

This demo

.main .black:nth-child(5n - 6) { 
    color: yellow; 
} 
.main .black:nth-child(5n - 4) { 
    color:purple; 
}

功能來計算使用n = element of type，所以:nth-child(n)會選擇每一個元素，:nth-child(2n)選擇所有奇數元素，:nth-child(2n-1)選擇所有偶數元素，等等上。您只需拿出那得到你想要的元素的功能

另一種選擇可能是另一個類添加到類的第一和/或最後一個元素

您可以選擇與第一個孩子通過結合像喬納森所說的兩個選擇器（我個人更喜歡div:not(.black) + div.black）與類的動態數量。然而，選擇具有給定元素的動態數量級的最後一個元素的唯一途徑沒有以前的兄弟選擇是使用JavaScript或者像jQuery庫如下：

的Javascript

var blackElems = document.getElementsByClassName('black'); 
blackElems[blackElems.length - 1].style.color = 'purple';

jQuery的

$('.main .black:last').css({ 'color' : 'purple' });

來源

2013-10-17 00:23:50

這是不可擴展的，如果元素的數量變化 – ohmusama

@ohmusama「你只需要拿出一個函數，讓你想要的元素」 –

你的建議是有一個動態的css文件，不能被緩存呢？（如果頁面上有元素的動態數量） – ohmusama

不，不幸的不是。

但是，可以選擇某一類的第一個孩子，通過結合兩個選擇（example）：

div.black:first-child, 
div:not(.black) + div.black

中的第一選擇，選擇一個黑色的DIV這顯然是它的第一個孩子家長。第二個選擇器選擇一個黑色div，前面是非黑色div。使用這兩個規則，你可以選擇第一個黑色的div。

欲瞭解更多信息，請參閱：:first-child,:not和adjacent sibling selector (+)。

來源

2013-10-17 00:21:45 Jonathan

如何選擇混合容器中的第一個孩子/最後一個孩子？

回答

相關問題