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

Home Forums CSS Splitting up a menu, left and right

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #43129

    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”?


    ul li:nth-of-type(5)

    browser support is IE9+




    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.