How to add some custom CSS for the last child only if visible with Jquery?

Question

Hi Guys,

I am allowing users to make parts of a list hidden/visible etc.

Now here is my list:

Basic list, but the very end list item has some custom CSS "border-bottom: none" - just to make it a bit more nicer looking.

<ul>
      <li class="item">Item</li>
      <li class="widget">widget</li>
      <li class="item">Item</li>
      <li class="item">Item</li>
      <li class="widget">Widget</li>
      <li class="widget">Widget</li>
</ul>

When I use the last selector, to add some custom CSS, it works perfect. My problem is when I hide the widgets, they are hidden as intended, but the custom CSS is used on this and as these are hidden, the border still shows up.

My question is how do I apply CSS to only the last visible child?

Answer 1

use the ":visible" selector:

$("li:visible:last").css("your css rules");