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
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...
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...
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
There is. Use 'last-of-type'
To add to that - please note that it doesn't work in IE8 and below (if you care).
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...
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
The corners of the hover color are protruding outside of the rounded corners. Thanks for the other info.
add overflow: hidden; to the ul
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.
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...
Try this: http://selectivizr.com/
I haven't used it much, but it seems to have worked when I did need it.