I am facing an issue with the following pseudo classes:
first-child: The first a element within each div should have a red background.last-child: The last a element within each div should have a blue background.only-child: Only the a element of the last div should have a grey background with 60% border radius and white text color.
The a element in the middle of each div ("Two") should have a green background.
However, all a elements appear with grey background, 60% border radius, and white text (essentially displaying only-child properties).
What modifications should I make to my code?
li {
list-style: none;
}
a {
padding: 10px;
display: inline-block;
background-color: green;
color: yellow;
text-decoration: none;
}
a:first-child {
background-color: red;
}
a:last-child {
background-color: blue;
}
a:only-child {
border-radius: 60%;
background-color: grey;
color: white;
}<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">Last one</a>
<!-- Background should be GREY, border radius at 60% and White text -->
</li>
</ul>
</div>