Question

I have a big outer div with many identical circles (which is a smaller div with border-radius 100%) in it.

I am using jquery to fade out these circles s when a user clicks on them, however I want to add additional event when the only remaining circle is clicked.

:last-child or :nth-child() are not going to help, as I don’t mind which circle is clicked until only one of them remains.

---

Again, the elements are FADED OUT so they are still siblings of the visible elements. So what I need is to select the “last visible” element.

<div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

</div>

---

$(document).ready(function(){
    $(".circle").click(function(){
        $(this).fadeOut("slow");
    });
    $("XXX").click(function(){
        alert("I was the last of Mohicans");
    });
});

Answer 1

Why not

.circle:first-child:last-child {

?

EDIT for edited question :

If you want to test when clicking if the element is the only one visible, you can do this :

$(document).ready(function(){
    $(".circle").click(function(){
        $(this).fadeOut("slow");
        if ($('.circle:visible').length>1) return; // returns if not the last one
        alert("I was the last of Mohicans");
    });
});