:last-child not working as expected?

Question

The issue lies within this CSS and HTML. Here is a link to jsFiddle with the sample code.

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

Shouldn't either of these lines of CSS target the last li element with the "complete" class?

This query in jQuery doesn't target it either:

$("li.complete:last-child");

But this one does:

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

@PatrickEvans What do you mean? http://api.jquery.com/category/selectors/ or more specifically http://api.jquery.com/last-child-selector/ — Nej Kutcharian, Sep 25 '13 at 02:51
Does this answer your question? [How can I select the last element with a specific class, not last child inside of parent?](https://stackoverflow.com/questions/7298057/how-can-i-select-the-last-element-with-a-specific-class-not-last-child-inside-o) — fabpico, Apr 12 '22 at 08:49

score 150 · Accepted Answer · edited May 23 '17 at 12:34

The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

To answer your question, the below would style the last child li element with background color as red.

li:last-child{
    background-color: red;
}

But the following selector would not work for your markup because the last-child does not have the class='complete' even though it is an li.

li.complete:last-child{
    background-color: green;
}

It would have worked if (and only if) the last li in your markup also had class='complete'.

To address your query in the comments:

@Harry I find it rather odd that: .complete:last-of-type does not work, yet .complete:first-of-type does work, regardless of it's position it's parents element. Thanks for your help.

The selector .complete:first-of-type works in the fiddle because it (that is, the element with class='complete') is still the first element of type li within the parent. Try to add <li>0</li> as the first element under the ul and you will find that first-of-type also flops. This is because the first-of-type and last-of-type selectors select the first/last element of each type under the parent.

Refer to the answer posted by BoltClock, in this thread for more details about how the selector works. That is as comprehensive as it gets :)

This is so silly but I think you're right. Hopefully they add this to the CSS4 spec. — Nej Kutcharian, Sep 25 '13 at 02:58
@NejKutcharian: Yes, I think it has been in proposal for a long time. — Harry, Sep 25 '13 at 02:59
@Harry I find it rather odd that: .complete:last-of-type does not work, yet .complete:first-of-type does work, regardless of it's position it's parents element. Thanks for your help. — Nej Kutcharian, Sep 25 '13 at 03:03
@NejKutcharian: Ok got it. `.complete:first-of-type` works in the fiddle because it is still the first element of type `li` within the parent. Try to add `

score 147 · Answer 2 · edited Mar 16 '18 at 15:48

147

:last-child will not work if the element is not the VERY LAST element

In addition to Harry's answer, I think it's crucial to add/emphasize that :last-child will not work if the element is not the VERY LAST element in a container. For whatever reason it took me hours to realize that, and even though Harry's answer is very thorough I couldn't extract that information from "The last-child selector is used to select the last child element of a parent."

Suppose this is my selector: a:last-child {}

This works:

<div>
    <a></a>
    <a>This will be selected</a>
</div>

This doesn't:

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

It doesn't because the a element is not the last element inside its parent.

It may be obvious, but it was not for me...

edited Mar 16 '18 at 15:48

darijan

9,597
24
37

answered Feb 04 '17 at 04:37

Govind Rai

12,166
9
63
80

14

Double man! Also, nth-last-child works the same. Use last-of-type instead. – Andri Apr 08 '17 at 20:46
1

Thank you so much for this info, it helped me figure out why my CSS wasn't working. I'm sure the sticklers would argue this is correct, but I sure wish the pseuoclass was last-child of the selector you're modifying, and didn't only work on last child of the whole node list. – BeniRose Apr 28 '17 at 00:52
This helped me. I had three labels and a @Html.ValidationMessageFor for the input and the last child was the ValidationMessage... – Spyros_Spy Dec 21 '19 at 17:03
This is super useful. I spent hours trying to get my li:last-child working, but it was followed by div. last-of-type worked for me – McAwesome Jun 01 '21 at 09:37
1

After struggling with this issue for a while, I searched stackoverflow where I saw this answer, which already had an orange upvote. Seems like this is not the first time you've helped me out haha – Robin Clower Sep 27 '21 at 16:30

score 14 · Answer 3 · answered Apr 19 '19 at 15:29

I encounter similar situation. I would like to have background of the last .item to be yellow in the elements that look like...

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

I use nth-last-child(2) to achieve it.

.item:nth-last-child(2) {
  background-color: yellow;
}

It strange to me because nth-last-child of item suppose to be the second of the last item but it works and I got the result as I expect. I found this helpful trick from CSS Trick

:last-child not working as expected?

3 Answers3

:last-child will not work if the element is not the VERY LAST element

Linked

Related