Last-child style over-rides first-child style when only one child is available

Question

ul li:first-child a {
   border-radius: 5px 5px 0 0;
}

ul li:last-child a {
   border-radius: 0 0 5px 5px;
}

When there's just once child, the last-child style over-rides the first-child style. Is there a way to apply both (since it is both the first and last child)

Am looking to achieve this with just CSS, without the aid of JS. Thanks.

Answer 1

Just apply your borders individually:

ul li:first-child a {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

ul li:last-child a {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

That way the last-applied rule doesn't override the previous rule (border-radius: 5px 5px 0 0; resets the bottom border radii back to zero).

Demo: http://jsfiddle.net/vUz5Z/5/

Answer 2

You can use :only-child. Just add

ul li:only-child a {
   border-radius: 5px;
}

after them. It won't work in IE8 (or older), but I'm guessing its not an issue, since border-radius doesn't work in IE8 either.

Or use the border radius on the list itself ul {border-radius: 5px} if that is possible.