CODEWITHSUNDEEP
htmlcssmargincss-selectors
Hung PD
Hung PD

Reputation: 405

CSS nth-child expression to remove margin-bottom of last row

I am creating lists that display in columns of two, every .customer-review-container has a margin-bottom like so:

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

What I wish to do is create an nth-child expression to remove the margin-bottom of on the last row (3rd and 4th), so I try with the code:

div:nth-child(3n+1).customer-review-container{
    margin-bottom: 0;
}

But it only removes the margin-bottom of last div (4th).

Upvotes: 1

Views: 3772

Answers (4)

zessx
zessx

Reputation: 68790

Use:

div:nth-child(n+3) .customer-review-container{
    margin-bottom: 0;
}

:nth-child(n+3) will target every div with an index superior or equal to 3 (indexes stars to 1).

EDIT:

If you want to target the last row, whatever if there's one or two elements, use this selector:

div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
    margin-bottom: 0;
}

Example:

.wrapper {
  border: 1px solid red;
  overflow: hidden;
}
.customer-review-container {
  border: 1px solid black;
  margin-bottom: 20px;
}
div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
  margin-bottom: 0;
  background: blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
</div>

Upvotes: 0

Danield
Danield

Reputation: 125473

This is what you need:

.col-md-6:nth-last-child(-n+2) .customer-review-container {
     margin-bottom: 0;
}

Sample DEMO

Upvotes: 3

StDako
StDako

Reputation: 1

you can use the nth-last-child(n) selector like so:

.customer-review-container:nth-last-child(-n+2) {
  margin-bottom: 0;
}

this will select the last two children

Upvotes: 0

jewelnguyen8
jewelnguyen8

Reputation: 249

div:nth-child(3n+1).customer-review-container, div:nth-child(3n+0).customer-review-container{
    margin-bottom: 0;
}

Upvotes: 0

Related Questions