Styling last item in ul [closed]

Question

I'm looking to format the bullets for the last item of the list.

I'm using Firebug to pinpoint where the menu item is and I have two options in front of me:

Screenshot 1

Screenshot 2 - Includes bullet

Now I'm looking at either using CSS or jQuery to select the last item.

I tried using this CSS and it applies to the last TWO items.

ul.children li:last-child{ 
color: red; 
list-style-type: circle;
}

Screenshot 3 - Output

I'm thinking maybe I need to use jQuery but I haven't had luck with that either.

---

Here is my custom walker that displays $output:

$output .= $indent . 
'<li><div class="link"><a href="' . get_page_link($page->ID) . '" title="' . 
esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, 
$page->ID ) ) ) . '">' . 
$link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . 
$link_after . '</a>' . $MetaOutput . '</div>';

I'm going to make a conditional that asks if $MetaOutput's children = 0 , apply this style.

I am going to try and make a class for the

at the beginning. Ideally, I'd like to replace the list-style-image for each li class. I'll edit this again and let you know how it goes.

Answer 1

You can use jQuery like this:

jQuery('ul.children li:last').addClass('last');

And then CSS it with:

ul.children li.last {
    color: red;
}

Hope this helps. Good luck!

Answer 2

If you post your HTML that would be help in figuring out what the CSS needs to be. Also, please indicate in the HTML which "last items" you want highlight. Since you have nested lists there will be many tags taht "li:last-child" applies to.