Grow your CSS skills. Land your dream job.

last-child selector – issue in IE

  • # December 6, 2011 at 9:14 am

    I am using the last-child selector to pad out a gap in my nav bar and it all works fine in most browsers, except in the latest version of IE. Are there any solutions or fallbacks for this?

    ul.dropdown li:last-child{padding-right:20px}
    # December 6, 2011 at 12:10 pm

    I think last-child is supported in IE9, but might not be in IE8. Can you provide more HTML/CSS? I rarely use first/last-child.

    # December 6, 2011 at 1:06 pm

    You might try this:

    ul.dropdown li:nth-last-child(1){padding-right:20px;}
    # December 6, 2011 at 1:10 pm

    IE7 and IE8 don’t support last-child, but they do support first-child. Just gotta switch your coding around to change the first one instead of the last one.

    # December 6, 2011 at 2:00 pm

    Here’s an article relating to what @TheDoc has just mentioned.

    # December 7, 2011 at 5:09 am

    Thanks jamy_za!

    # December 7, 2011 at 6:30 am

    I should mention that the absolute positioning of my nav bar is keeping it to the left and hence the gap at the right. I am not sure how you could reverse this without distorting the output altogether.

    # December 7, 2011 at 8:15 am

    Have a look at this: http://code.google.com/p/ie7-js/

    # December 7, 2011 at 8:42 am

    Wow – that is pretty nifty. Thanks very much.

    # December 7, 2011 at 10:49 am

    Sorry, I thought this was solved but it’s not. The last-child selector is not working with IE9 and the ie script library.

    # December 7, 2011 at 11:16 am

    IE9 supports :last-child. Make a jsfiddle of the problem.

    # December 7, 2011 at 11:29 am

    jfiddle

    # December 7, 2011 at 11:40 am

    Are you sure it’s just IE with that problem? It look like you’re trying to cover up the gap at the end by adding padding to the last-child list item. So if that’s what you’re trying to do, it wasn’t working in my FireFox 8 either because you weren’t giving enough padding: http://jsfiddle.net/7rSMc/3/

    Here is another way of doing it (I’d say this is a better way): http://jsfiddle.net/7rSMc/2/

    # December 7, 2011 at 12:22 pm

    Many thanks – what did you change? I can’t spot it.

    # December 7, 2011 at 12:25 pm

    http://jsfiddle.net/7rSMc/3/ – changed this piece of css:

    ul.dropdown li:last-child {
    padding-right: 42px;
    }

    http://jsfiddle.net/7rSMc/2/ – I added a couple of properties to this selector, namely the background, left and width properties:

    ul.dropdown {
    background: #647484;
    font: 1.6em Verdana, Geneva, sans-serif;
    position: absolute;
    top: 103px;
    left: 12px;
    list-style: none;/*no bullets*/
    width: 800px;
    }
Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".