Het probleem ligt in deze CSS en HTML. Hier is een link naar jsFiddlemet de voorbeeldcode.
HTML
<ul>
<li class"complete">1</li>
<li class"complete">2</li>
<li>3</li>
<li>4</li>
</ul>
CSS
li.complete:last-child {
background-color:yellow;
}
li.complete:last-of-type {
background-color:yellow;
}
Moeten geen van deze CSS-regels het laatste li-element targeten met de klasse “complete”?
Deze zoekopdracht in jQuery is er ook niet op gericht:
$("li.complete:last-child");
Maar deze wel:
$("li.complete").last();
Antwoord 1, autoriteit 100%
De last-childselector wordt gebruikt om het laatste onderliggende element van een ouder te selecteren. Het kan niet worden gebruikt om het laatste onderliggende element met een specifieke klasse onder een bepaald bovenliggend element te selecteren.
Het andere deel van de samengestelde selector (die is toegevoegd vóór de :last-child) specificeert extra voorwaarden waaraan het laatste onderliggende element moet voldoen om te worden geselecteerd. In het onderstaande fragment ziet u hoe de geselecteerde elementen verschillen, afhankelijk van de rest van de samengestelde selector.
Antwoord 2, autoriteit 98%
:last-child werkt niet als het element niet het HEEL LAATSTE element is
In aanvulling op Harry’s antwoord, denk ik dat het cruciaal is om toe te voegen/benadrukken dat :last-child niet zal werken als het element niet het HEEL LAATSTE element in een container is. Om wat voor reden dan ook kostte het me uren om dat te beseffen, en hoewel Harry’s antwoord zeer grondig is, kon ik die informatie niet extraheren uit “De laatste-kind-selector wordt gebruikt om het laatste onderliggende element van een ouder te selecteren.”
Stel dat dit mijn selector is: a:last-child {}
Dit werkt:
<div>
<a></a>
<a>This will be selected</a>
</div>
Dit niet:
<div>
<a></a>
<a>This will no longer be selected</a>
<div>This is now the last child :'( </div>
</div>
Niet omdat het aelement niet het laatste element in zijn bovenliggende element is.
Het ligt misschien voor de hand, maar het was niets voor mij…
Antwoord 3, autoriteit 9%
Ik kom een soortgelijke situatie tegen. Ik wil graag dat de achtergrond van het laatste .itemgeel is in de elementen die eruitzien als…
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
...
<div class="item">item x</div>
<div class="other">I'm here for some reasons</div>
</div>
Ik gebruik nth-last-child(2)om dit te bereiken.
.item:nth-last-child(2) {
background-color: yellow;
}
Het is vreemd voor mij omdat het nth-last-child van item veronderstelt dat het de tweede van het laatste item is, maar het werkt en ik kreeg het resultaat zoals ik had verwacht.
Ik vond deze handige truc van CSS-truc