- This topic is empty.
October 5, 2012 at 5:27 pm #40170AnonymousInactive
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
There is. Use ‘last-of-type’October 5, 2012 at 5:58 pm #111354theacefesMember
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 #111355AnonymousInactive
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
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 stateOctober 5, 2012 at 7:08 pm #111357AnonymousInactive
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 #111358wolfcry911Participant
add overflow: hidden; to the ulOctober 5, 2012 at 7:20 pm #111359
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 #111360AnonymousInactive
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 #111370cnwtxMember
Try this: http://selectivizr.com/
I haven’t used it much, but it seems to have worked when I did need it.
- The forum ‘CSS’ is closed to new topics and replies.