Стиль последнего ребенка переполняет стиль первого ребенка, когда доступен только один ребенок

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

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

Когда только один раз ребенок, стиль последнего ребенка переполняет стиль первого ребенка. Есть ли способ применить оба (поскольку он является первым и последним дочерним элементом)

Я хочу добиться этого только с помощью CSS без помощи JS. Спасибо.

Ответ 1

Просто примените свои границы отдельно:

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;
}

Таким образом, последнее правило не отменяет предыдущее правило (border-radius: 5px 5px 0 0; сбрасывает радиусы нижней границы обратно на ноль).

Демо: http://jsfiddle.net/vUz5Z/5/

Ответ 2

Вы можете использовать :only-child. Просто добавьте

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

после них. Он не будет работать в IE8 (или старше), но я предполагаю, что это не проблема, так как border-radius тоже не работает в IE8.

Или используйте радиус границы в самом списке ul {border-radius: 5px}, если это возможно.

Ответ 3

Почему бы не поместить радиус границы в контейнер?

ul,li { margin:0; padding:0; list-style:none; }
ul { border-radius: 10px; overflow:hidden }
a { display:block; margin-bottom:2px; padding:3px; background-color:#f00 }
ul li:last-child a {
 margin: 0;
}

http://jsfiddle.net/BanEg/

Ответ 4

Вы также можете использовать auto insead of 0px values. Ex. (МЕНЬШЕ):

&:first-child{
    .border-radiuses (5px, auto, auto, 5px);

}
&:last-child{
    .border-radiuses (auto, 5px, 5px, auto);
}