I've a set of divs which contain some information to be displayed. How do I change the color of the link text inside every even container?
.container {
height: 200px;
margin-top: 5px;
}
.container:nth-child(even){
background-color: green;
}
.container:nth-child(odd) {
background-color: skyblue;
}
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
Add CSS that targets only childs of these divs.
.container {
height: 200px;
margin-top: 5px;
}
.container:nth-child(even){
background-color: green;
}
.container:nth-child(odd) {
background-color: skyblue;
}
.container:nth-child(odd) a {
color: green;
}
.container:nth-child(even) a{
color: skyblue;
}
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>
<div class="container">
Company website: <a href="abc.html">ABC</a>
My Profile: <a href="user.html">User1</a>
<button>Edit</button>
</div>