How to remove border from elements in the last row?

Question

My layout is something like this (I'm typing a simplified version with inline styles instead of classes)

.qa {
  border-bottom: 1px solid #ccc;
}

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

This basically renders something like this:

My questions is:

How do I get rid of the border in the last row?

Answer 1

You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 40%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class="wrapper">
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
</div>

This trick should work even if the number of element in a row is different from 2:

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;
  
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class="wrapper">
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

It will also work with a reponsive layout where the number of columns can change on small screens:

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;
  
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

@media all and (max-width:800px) {
  .qa {
    flex:1 1 30%;
  }
}

@media all and (max-width:400px) {
  .qa {
    flex:1 1 40%;
  }
}

<div class="wrapper">
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

Answer 2

1: Use Another CSS class

We can create another CSS class which removes any styling form an existence element

.no-border {
  border-bottom: none;
}

Then add this class to the html element e.g.

  <div class="qa no-border" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>

2: Use CSS pseudo selector

.qa:last-child {
  border-bottom: none;
}

.qa:nth-last-child(2) {
    border-bottom: none;
}

Answer 3

Don't think about it as border-bottom.

Think about it as border-top and exclude the first two elements.

So instead of this:

.qa { border-bottom: 1px solid #ccc; }

Try this:

.qa + .qa + .qa { border-top: 1px solid #ccc; }

.qa + .qa + .qa {
  border-top: 1px solid #ccc;
}

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.

So .qa + .qa would target only .qa elements that are preceded by one .qa element.

.qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.

---

Alternatively, you can try this:

.qa:nth-child(n + 3) { border-top: 1px solid #ccc; }

.qa:nth-child(n + 3) {
  border-top: 1px solid #ccc;
}

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>


</div>