Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS selecting list items all but last?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #32020
    cybershot
    Participant

    is there a method in css to select all but the last list item in a particular class? I am using css to add a character between the navigation in wordpress. But it adds the character after every link. I want to remove the character from the last link only.

    #55485
    jamygolden
    Moderator

    It’s easier to ignore the first. So do this:

    li + li{border-left: 1px solid red;}

    That will place a border to the left of every list item except the first. This will work in IE7+

    #55486
    cybershot
    Participant

    well ignoring the first isn’t what I want to do. I want to ignore the last.

    #55487
    TheDoc
    Moderator

    Cybershot, don’t be so quick to ignore what Jamy is trying to tell you!

    Instead of having the character that you want to add come after the navigation, have it come before the navigation, but exclude the first one.

    #55488
    cybershot
    Participant

    okay, I tried it and this is what happened. I am working in wordpress. I am adding a character in between the navigation. Every time you add a new menu item, it automatically adds the character. So I had to add php code to the wp_nav_menu function to get it to add the image between the nav, so it looks like this


    wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary','after' => '
  • ' ) );

    now I tried the fix and it messes up the nav. I tried like this


    #nav ul#list li.star + li.star

    #nav ul#list li + li

    it doesn’t work. This is what I ended up getting to work


    #nav ul#list li.star {
    background:url(images/star.png) no-repeat;
    width: 26px;
    height: 38px;
    }

    #nav ul#list li.star:last-child {
    background:url(images/blank.png) no-repeat;
    width: 26px;
    height: 38px;
    }

    I understand now what you were saying jamy, it would be easier but I can’t get it to work

    #55489
    jamygolden
    Moderator

    I think you may have misunderstood what I meant when I said “easier” (I should have explained). It’s easier for the browser to target the first child and also easier to get it working on most browsers. :last-child is very heavy compared to :first-child or element + element and the latter works on IE7+, whereas :first-child works on IE8+ and :last-child only works on IE9. (these work on the latest versions of all other major browsers such as Chrome, Firefox, Opera, Safari)

    If you don’t mind ignoring IE then :last-child is fine, however, if you want to include it then I suggest element + element or :first-child

    #list li + li{background: red !important!;}

    Try that, itshould make all backgrounds red except the first and you can work on it from there.

    #55460
    seeingsound
    Member

    I have used jQuery with almost the same problem:


    jQuery(document).ready(function($) {
    $('#nav li:not(:last)').addClass('star');
    });
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.