Is there a way to change the background color of individual items in a list without affecting the entire list? I specifically want the background of items in one list to be green, and items in another list to be teal. How can I achieve this?
This is the code I have been working with:
<!DOCTYPE html>
<html>
<head>
<title>CSS Exercises 1</title>
<link rel="stylesheet" type="text/css" href="exercise1.css">
</head>
<body>
<ul id="unordered_list">
<li>This is an unordered list.</li>
<li>All items in this list should have a yellow background.</li>
<li>Just the items though - not the whole list!</li>
</ul>
<ol id="ordered_list">
<li>This is an ordered list.</li>
<li>All items in this list should have a teal background.</li>
<li>Just the items thought - not the whole list!</li>
</ol>
</body>
</html>
Here's my CSS attempt:
#unordered_list {
background-color: yellow;
}
#ordered_list li{
background-color: rgb(2, 132, 130);
}
Any help would be greatly appreciated. Thank you!