Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

  • share|improve this question
    1  
    Close voted: Plain css & Js Q. –  kaiser Nov 28 '11 at 16:20
        
    Yes this is true, although I am using a plugin that filters the wp_list_pages, as well as a Custom Walker, so this gets pretty deep into WordPress fast. I thought by including the screenshots of the CSS elements, that might help. –  AlxVallejo Nov 28 '11 at 16:24
    add comment

    closed as off topic by kaiser, EAMann Nov 28 '11 at 20:09

    Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    2 Answers

    up vote 1 down vote accepted

    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!

    share|improve this answer
        
    Sorry for my previous answer, thought you wanted to style the last two elements :) if you have nested lists then use the ul.children:last li:last selector for jQuery. –  kovshenin Nov 28 '11 at 16:16
        
    This is great. Except my goal is to style the last item of each first level list. See here: screencast.com/t/MBtFzK7ZYe. I'm not quite sure how the above selector works but maybe you had a simple answer. Thanks! –  AlxVallejo Nov 28 '11 at 18:47
        
    @AlxVallejo that's quite tricky. Perhaps something like ul.children li:last, ul.children ul:last li:last will work. In your screenshot you have different levels, not sure about the class names but it would be much easier if you pasted your entier HTML code and let us know which items you'd like to be "last" :) –  kovshenin Nov 28 '11 at 19:19
    add comment

    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.

    share|improve this answer
    add comment

    Not the answer you're looking for? Browse other questions tagged or ask your own question.