Wie kann das erste Kind/letzte Kind der Klasse in einem gemischten Container ausgewählt werden?

Question

Kann ich das erste und letzte Kind einer Klasse in einem div auswählen, das untergeordnete Klassen hat?

Zum Beispiel:

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

I first-Kind und Last-Kind .black auswählen möchten. Ist das möglich?

Answer 1

Verwenden Sie nth-child oder nth-of-type in Kombination mit dem Klassenselektor.

Live Example

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

Oder wenn Sie wollen,

This demo

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

getrennt sein

Die Funktion n = element of type mit berechnet, so :nth-child(n) jedes Element auswählen würde, wählt :nth-child(2n) alle ungeraden Elemente , :nth-child(2n-1) wählt alle geraden Elemente und so auf. Sie müssen einfach nur mit einer Funktion kommen, dass Sie die Elemente, die Sie

Eine weitere Option wollen bekommt möglicherweise eine andere Klasse an die erste und/oder letzte Element der Klasse

Sie fügen sein, um das erste Kind mit einem auswählen dynamische Anzahl von Elementen mit der Klasse durch die Kombination von zwei Selektoren wie Jonathan sagte (ich bevorzuge div:not(.black) + div.black persönlich). Doch der einzige Weg, das letzte Element mit einer Klasse mit einer dynamischen Anzahl von Elementen wählen gegeben gibt es keinen vorherigen Geschwister Wähler verwenden Javascript oder eine Bibliothek wie jQuery wie folgt:

Javascript

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

jQuery

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

Answer 2

Nein, leider nicht.

Allerdings ist es möglich, das erste Kind einer bestimmten Klasse zu wählen, die von zwei Selektoren kombiniert (example):

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

Der erste Selektor wählt einen schwarzen div, die es offenbar das erste Kind ist ist Elternteil. Der zweite Selektor wählt ein schwarzes div aus, dem ein nicht-schwarzes div vorausgeht. Mit diesen beiden Regeln können Sie das erste schwarze div auswählen. Weitere Informationen finden Sie unter: :first-child, :not und adjacent sibling selector (+).