I'm using a CSS+JS menu bar widget that makes left-justified menus. However, it's common to put the About Us and Contact Us on the right end of the bar.
I'm sure I can do this by editing the widget's PHP code and putting in some logic to see if I'm the About menu and then changing the class or id so my css can find it.
But is there a way to do this entirely in the css without modifying the PHP? For instance, is there a way to make a selector for "the 5th item in this ul list"?
But that moves them in reverse order. IE, the item that was third from the right ends up on the far right. I tried reversing the order of the selectors, but that didn't help.
I'm using a CSS+JS menu bar widget that makes left-justified menus. However, it's common to put the About Us and Contact Us on the right end of the bar.
I'm sure I can do this by editing the widget's PHP code and putting in some logic to see if I'm the About menu and then changing the class or id so my css can find it.
But is there a way to do this entirely in the css without modifying the PHP? For instance, is there a way to make a selector for "the 5th item in this ul list"?
browser support is IE9+
or
http://codepen.io/Paulie-D/pen/Fftou
You could also use li:nth-last-of-type(1) and li:nth-last-of-type(2) to refer to the last two elements.
Superb, thank you so much everyone!
Ok, one extremely minor issue… I want to move three items to the right. So I did this…
.sf-menu li:nth-last-of-type(1) { float: right; } .sf-menu li:nth-last-of-type(2) { float: right; } .sf-menu li:nth-last-of-type(3) { float: right; }
But that moves them in reverse order. IE, the item that was third from the right ends up on the far right. I tried reversing the order of the selectors, but that didn't help.