CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Brian Patrick
Brian Patrick

Reputation: 341

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

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?

Upvotes: 1

Views: 2661

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

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>

Upvotes: 3

cjl750
cjl750

Reputation: 4629

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>

Upvotes: 1

Related Questions