Forums

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
    Posts
  • #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”?

    #126858
    Paulie_D
    Member

    ul li:nth-of-type(5)

    browser support is IE9+

    or

    ul:nth-child(5)

    http://codepen.io/Paulie-D/pen/Fftou

    #126865
    Merri
    Participant

    You could also use li:nth-last-of-type(1) and li:nth-last-of-type(2) to refer to the last two elements.

    #127092

    Superb, thank you so much everyone!

    #127095

    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.