Grow your CSS skills. Land your dream job.

Borders and border-radius/hover state questions

  • # October 5, 2012 at 5:27 pm

    I’m not really sure how to explain this, but you can see what I’m asking on CodePen below.

    Is there a CSS way to remove the bottom border of the last list item, without adding a class to the li tag? Also, how do you make the hover state follow the border-radius?

    Sorry for the bad question structure, but it’s easier just to look at it and see what I mean than it is to try to explain it! Thanks =P

    >[CodePen Example](http://codepen.io/msguerra74/pen/yzaoi)

    # October 5, 2012 at 5:36 pm

    There is. Use ‘last-of-type’

    # October 5, 2012 at 5:58 pm

    To add to that – please note that it doesn’t work in IE8 and below (if you care).

    # October 5, 2012 at 6:04 pm

    I’ve done it before with a class, but I don’t like adding to the markup like that. I also try to, at least, support IE8+, so I’m not sure which is better. I tried using the same idea to fix the hover state from extending beyond the border-radius by adding ‘first/last-of-type’, but it doesn’t seem to work right. I’m thinking I’m just missing something obvious, but my brain is in Friday mode apparently…

    # October 5, 2012 at 7:05 pm

    If you must support IE8 then just add a class. It’s not ‘ideal’ but neither is IE8.

    I’m not sure what it is you are trying to change on the hover state

    # October 5, 2012 at 7:08 pm

    The corners of the hover color are protruding outside of the rounded corners. Thanks for the other info.

    # October 5, 2012 at 7:14 pm

    add overflow: hidden; to the ul

    # October 5, 2012 at 7:20 pm

    Wolfcry’s answer is by far the simplest solution.

    In general, I try not to style the ul except for positioning purposes but rather will style the li or a directly.

    Making the a link the same dimensions as the li often has benefits that outweigh any extra css.

    # October 5, 2012 at 8:06 pm

    I added a mix of the suggestions and got it working. I even took away the ul styling for fun! I really like the idea of the first/last-of-type, I just wished it worked at least in IE8 because I don’t like adding classes for weird things like that. Oh well, I wish the whole IE thing wasn’t even an issue, but it is…

    # October 6, 2012 at 11:11 am

    Try this: http://selectivizr.com/

    I haven’t used it much, but it seems to have worked when I did need it.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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