Forums

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

Home › Forums › CSS › Borders and border-radius/hover state questions

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 5, 2012 at 5:27 pm #40170
    Anonymous
    Inactive

    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 #111353
    Paulie_D
    Member

    There is. Use ‘last-of-type’

    October 5, 2012 at 5:58 pm #111354
    theacefes
    Member

    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 #111355
    Anonymous
    Inactive

    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 #111356
    Paulie_D
    Member

    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 #111357
    Anonymous
    Inactive

    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 #111358
    wolfcry911
    Participant

    add overflow: hidden; to the ul

    October 5, 2012 at 7:20 pm #111359
    Paulie_D
    Member

    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 #111360
    Anonymous
    Inactive

    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 #111370
    cnwtx
    Member

    Try this: http://selectivizr.com/

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

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