:last vs :last-child selector

Asked 9/1, 2018 at 2:18 Answered 2/8 at 21:14

I've noticed that $( 'filter:last' ) is different from $( 'filter:last-child' ) in jQuery.

I tried the jQuery docs but had a hard time understanding what additional purpose :last serves and why they both exist.

Apparently, :last is a jQuery extension and not in the CSS specification. So, the question came to my mind of how it is different from the traditional :last-child. Also, there happens to be a .last() method in jQuery which is said to be more efficient than $( 'filter:last' ), so what use does the :last selector have?

Columbite answered 9/1, 2018 at 2:18 Comment(4)

From the docs: While :last matches only a single element, :last-child can match more than one: one for each parent. - what part of this is unclear? – Volcano 9/1, 2018 at 2:24

I was looking at this. My mistake. – Columbite 9/1, 2018 at 2:30

@cale_b: The part were one should read the doc. ;) – Cranwell 9/1, 2018 at 2:43

There is :last-of-type and :nth-last-child() too... ;) – Cranwell 9/1, 2018 at 2:49

They are very similar. The difference is that if you have something like

<div>
  <p>hi</p>
  <p>bye</p>
</div>
<div>
  <p>hi</p>
  <p>bye</p>
</div>

$('p:last-child') will select both <p>bye</p> elements whereas $('p:last') will select only the second one. It's also true that the same thing can be done with $('p').last(), by adding :last as a selector jQuery allows for using filter with :last without having to make the argument of the filter be a function.

Tallu answered 9/1, 2018 at 2:41 Comment(0)

The :last selector matches only a single element, :last-child can match more than one: one for each parent.

See below example for better illustration-

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>last-child demo</title>
  <style>
 span.solast {
   text-decoration: line-through;
  }
 </style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>
<body>

<div>
 <span>John,</span>
 <span>Karl,</span>
 <span>Brandon,</span>
 <span>Sam</span>
</div>
 <div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
 </div>
<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>

<table>
  <tr><td>Second Table First Row</td></tr>
  <tr><td>Second Table Middle Row</td></tr>
  <tr><td>Second Table Last Row</td></tr> 
</table>


<script>
$( "div span:last-child" )
 .css({ color:"red", fontSize:"80%" })
 .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });

$( "table tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" 
});
</script>

</body>
</html>

You can see that in above code :last selector changes background color Yellow of only one tr not the both tr which means :last selects only single element. Whereas :last-child will select each elements last child.

Theophilus answered 9/1, 2018 at 2:54 Comment(4)

«better illustration» would be optimized with a code snippet. Explore the icons of the edit mode a little. – Cranwell 9/1, 2018 at 2:56

Good example, but @LouysPatriceBessette makes a good point. Try editing your post and optimizing it a little bit using a code snippet. – Columbite 9/1, 2018 at 23:33

HI @LouysPatriceBessette i am new to stackoverflow, could you please mention how to use code snippet here, I am not very sure what you are talking about – Theophilus 10/1, 2018 at 2:36

Here is a fully detailled blog post about SO code snippet. – Cranwell 10/1, 2018 at 13:11

This is for CSS:

Using :last-child is very similar to :last-of-type but with one critical difference: it is less specific.

:last-child will only try to match the very last child of a parent element, while :last-of-type will match the last occurrence of a specified element, even if it doesn’t come dead last in the HTML.

Source: https://css-tricks.com/almanac/selectors/l/last-child/

Dysplasia answered 2/8 at 21:14 Comment(0)

Recommended topics

Hot tags