Rand-Radius bei Listenelementen?

Question

Ich möchte einer Liste von Elementen einen Rahmenradius hinzufügen, aber ich möchte nicht, dass der Stil auf jedes Element angewendet wird. Im Moment hat mein Stil die ungeraden Listenelemente mit einer Farbe und die geraden Elemente eine dunklere Farbe. Wenn ich den Rahmenradius auf die li anwende, ist er für jede Zeile sichtbar, aber ich möchte, dass er nur auf das erste und das letzte Element angewendet wird. Wie kann ich das erreichen, ohne eine spezielle ID oder Klasse für nur diese beiden Listenelemente zu erstellen?

Hier ist mein HTML und 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;
}

Answer 1

Verwenden. :first-child y :last-child

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