Jquery (“.selector li:last-child”) vs (“.selector > li:last-child”)

Question

Why is (“.mylist li:last-child”) not working, but (“.mylist > li:last-child”) give the right result and what exactly is the difference?

I àm wondering because my script was working for some time...

<ul class="mylist ">
    <li id="1">a</li>
    <li id="2">b</li>
    <li id="3">c</li>
    <li id="4">d</li>
</ul>

var $LastpostID = $('.mylist li:last').attr('id')
console.log ($LastpostID)
result undefined


var $LastpostID = $('.mylist > li:last').attr('id')
console.log ($LastpostID)
result 4

Answer 1

> means "direct child of": only nodes that are direct children are selected.

While a space means "any descendant of": direct children and children of those children could be selected.

but in your case both should work as same.