Using nth-child and Bootstrap to select even elements with just CSS - html

Question

When I am not using bootstrap this setup works just fine. But when I wrap it all in bootstrap stuff it stops working. How do I fix that?
<style>
.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;
}
.card:nth-child(even):hover {
border-color: #ff7c5e;
}
</style>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
Works just fine, but when I use bootstrap. It stops working. I've tried selecting the .row and .col-s6 but I cannot seem to get it to work. Using .card:nth-child)even):hover works to get it change all divs to the same color.
<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>
I can't figure out what element or class I need to use. I had somebody tell me that I wasn't grabbing a class. But if the class on the div is card and I'm selecting .card in my CSS file aren't I selecting a class?

Answer 1

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>

Answer 2

Your problem is that each .card is wrapped in its own .col-s6.col-sm div.
So now every card is the first child of its container, and one is, of course, an odd number.
What you want to do is select the container element using :nth-child(even) and then add the hover to the card within that selection.
.col-sm:nth-child(even) .card:hover {
background-color: red;
}
<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>