开发者

Border-radius on list elements?

I would like to add a border radius to a list of items but I don't want each item to have the style applied to it. Right now my style has the odd list elements with one color and the even elements a darker color. When I apply the border-radius to the li it is visible for each row but I only want the first item and the last item to have this be applied to. How do I make this happen without making a special id or class for only those two list items?

Here is my HTML and CSS:开发者_开发问答

<section id="list">
<ul>
        <li>Song 1</li>
        <li>Song 2</li>
        <li>Song 3</li>
    </ul>
</section>

ul{
list-style:none;
padding-left:0px;
width:600px;
}

ul li:nth-child(odd){
background: rgba(12,147,0,0.4);
}

ul li:nth-child(even){
background: rgba(12,147,0,0.7);
}

li{
padding:15px;
border-radius: 20px;
}


use :first-child and :last-child

li:first-child, li:last-child{
    padding:15px;
    border-radius: 20px;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜