Search code examples
htmlcsscss-selectorspseudo-class

Change the color of the link in every even div


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>


Solution

  • 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>