Issue
The following pseudo classes doesn't work as I expected:
first-child: The firsts a of each div should have a red backgroud.last-child: The last a of each div should have a blue backgroud.only-child: Only the a of the last div should have the grey background, the border radius at 60% and the text color to white.
The a in the middle of each div ("Two") should have a green background.
As I said before, It doesn't work as I wanted it to because as a result it appears all a with grey background, border radius at 60% and white text (basically with the only-child propeties).
What should I change in 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>Solution
- You understood in a wrong way the a here is child of
li. -Means what ever you want to apply apply to child ofulwhich isli. ul li:fisrt-child. -ul li:last-child. -ul li:only-child.
li {
list-style: none;
}
a {
padding: 10px;
display: inline-block;
background-color: green;
color: yellow;
text-decoration: none;
}
ul li:first-child a {
background-color: red;
}
ul li:last-child a {
background-color: blue;
}
ul li:only-child a {
border-radius: 60%;
background-color: grey;
color: white;
}<body>
<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>
</body>Answered By - Nikkkshit
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.