Select Even Elements

Using Nth-Child and Bootstrap to Select Even Elements With Just CSS

 

 

Correct your selector from .card:nth-child(even):hover to .col-s6:nth-child(even) .card:hover

.card:nth-child(even):hover will select every even card within it’s parent.

.col-s6:nth-child(even) .card:hover will select every even col-s6 and then it will affact it’s child which is .card

.card {
  margin: 30px auto;
  padding: 20px 40px 40px;
  width: 450px;
  height: 450px;
  text-align: center;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}

.card:hover {
  border-color: #75dcff;
}

.col-s6:nth-child(even) .card:hover {
  border-color: #ff7c5e;
}
<div class="container">
  <div class="row">

    <div class="col-s6 col-sm">
      <div class="card projects">
        <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
        <a href="#">
          <img src="#">
        </a>
      </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
        <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
        <a href="#">
          <img src="#">
        </a>
      </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
        <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
        <a href="#">
          <img src="#">
        </a>
      </div>
    </div>

  </div>
</div>

LEAVE A REPLY

Please enter your comment!
Please enter your name here