Forums

cybershot

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.

jamy_za

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+

cybershot

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

TheDoc

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.

cybershot

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

jamy_za

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.

seeingsound

I have used jQuery with almost the same problem:


jQuery(document).ready(function($) {
 $('#nav li:not(:last)').addClass('star');
});

treehouse : what would you like to learn today?

Forums

selecting list items all but last?