How to remove border from elements in the last row?Targeting flex items on the last rowHow to vertically wrap content with flexbox?Remove border from IFrameHow do you keep parents of floated elements from collapsing?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?Div width 100% minus fixed amount of pixelsHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?Flex-box: Align last row to grid
Unlock My Phone! February 2018
How exploitable/balanced is this homebrew spell: Spell Permanency?
Getting extremely large arrows with tikzcd
How to compactly explain secondary and tertiary characters without resorting to stereotypes?
What is the most common color to indicate the input-field is disabled?
How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?
How to calculate the right interval for a timelapse on a boat
Why didn't Boeing produce its own regional jet?
Am I breaking OOP practice with this architecture?
What is required to make GPS signals available indoors?
Knowledge-based authentication using Domain-driven Design in C#
Should I tell management that I intend to leave due to bad software development practices?
Is it "common practice in Fourier transform spectroscopy to multiply the measured interferogram by an apodizing function"? If so, why?
Do Iron Man suits sport waste management systems?
Can a virus destroy the BIOS of a modern computer?
Why are UK visa biometrics appointments suspended at USCIS Application Support Centers?
How could indestructible materials be used in power generation?
how do we prove that a sum of two periods is still a period?
Can compressed videos be decoded back to their uncompresed original format?
Finitely generated matrix groups whose eigenvalues are all algebraic
Sums of two squares in arithmetic progressions
How to travel to Japan while expressing milk?
Mathematica command that allows it to read my intentions
What is the fastest integer factorization to break RSA?
How to remove border from elements in the last row?
Targeting flex items on the last rowHow to vertically wrap content with flexbox?Remove border from IFrameHow do you keep parents of floated elements from collapsing?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?Div width 100% minus fixed amount of pixelsHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?Flex-box: Align last row to grid
7
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?
html css css3 flexbox css-selectors
edited 1 hour ago
Michael_B
157k50255363
asked 4 hours ago
supersansupersan
1,7871837
add a comment |
7
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?
html css css3 flexbox css-selectors
edited 1 hour ago
Michael_B
157k50255363
asked 4 hours ago
supersansupersan
1,7871837
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
4 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
4 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
4 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
3 hours ago
add a comment |
7
7
7
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?
html css css3 flexbox css-selectors
edited 1 hour ago
Michael_B
157k50255363
asked 4 hours ago
supersansupersan
1,7871837
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?
.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>.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>html css css3 flexbox css-selectors
html css css3 flexbox css-selectors
edited 1 hour ago
Michael_B
157k50255363
asked 4 hours ago
supersansupersan
1,7871837
edited 1 hour ago
Michael_B
157k50255363
asked 4 hours ago
supersansupersan
1,7871837
edited 1 hour ago
Michael_B
157k50255363
edited 1 hour ago
Michael_B
157k50255363
edited 1 hour ago
Michael_B
157k50255363
157k50255363
asked 4 hours ago
supersansupersan
1,7871837
asked 4 hours ago
supersansupersan
1,7871837
asked 4 hours ago
supersansupersan
1,7871837
1,7871837
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
4 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
4 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
4 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
3 hours ago
add a comment |
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
4 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
4 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
4 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
3 hours ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
4 hours ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
4 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
4 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
4 hours ago
4
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
4 hours ago
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
4 hours ago
2
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
3 hours ago
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
3 hours ago
add a comment |
7 Answers
7
active
oldest
votes
3
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;
edited 3 hours ago
Temani Afif
81.8k104793
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
add a comment |
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 3 hours ago
zhirzhzhirzh
1,6801723
add a comment |
1
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>answered 4 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
add a comment |
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>answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
add a comment |
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
content: "";
position: relative;
bottom: 0;
left:0;
right:0;
height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
background: #fff; /* match this with your parent element background colour*/
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
add a comment |
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>answered 3 hours ago
aridlehooveraridlehoover
1,8041615
add a comment |
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.qa:not(:nth-child(-n+2))
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>answered 1 hour ago
GeatGeat
208110
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55480980%2fhow-to-remove-border-from-elements-in-the-last-row%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
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;
edited 3 hours ago
Temani Afif
81.8k104793
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
add a comment |
3
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;
edited 3 hours ago
Temani Afif
81.8k104793
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
add a comment |
3
3
3
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;
edited 3 hours ago
Temani Afif
81.8k104793
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
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;
edited 3 hours ago
Temani Afif
81.8k104793
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
edited 3 hours ago
Temani Afif
81.8k104793
edited 3 hours ago
Temani Afif
81.8k104793
edited 3 hours ago
Temani Afif
81.8k104793
81.8k104793
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 3 hours ago
KhaledMohamedPKhaledMohamedP
2,29021720
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
add a comment |
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
3 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
2 hours ago
add a comment |
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 3 hours ago
zhirzhzhirzh
1,6801723
add a comment |
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 3 hours ago
zhirzhzhirzh
1,6801723
add a comment |
3
3
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 3 hours ago
zhirzhzhirzh
1,6801723
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 3 hours ago
zhirzhzhirzh
1,6801723
answered 3 hours ago
zhirzhzhirzh
1,6801723
answered 3 hours ago
zhirzhzhirzh
1,6801723
answered 3 hours ago
zhirzhzhirzh
1,6801723
1,6801723
add a comment |
add a comment |
1
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>answered 4 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
add a comment |
1
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>answered 4 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
add a comment |
1
1
1
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>answered 4 hours ago
Michael_BMichael_B
157k50255363
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>.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>.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>.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>.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>answered 4 hours ago
Michael_BMichael_B
157k50255363
edited 3 hours ago
answered 4 hours ago
Michael_BMichael_B
157k50255363
answered 4 hours ago
Michael_BMichael_B
157k50255363
answered 4 hours ago
Michael_BMichael_B
157k50255363
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
add a comment |
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
3 hours ago
add a comment |
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>answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
add a comment |
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>answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
add a comment |
1
1
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>answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
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>.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>.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>.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>.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>.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>.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>answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
edited 2 hours ago
answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
answered 3 hours ago
Temani AfifTemani Afif
81.8k104793
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
add a comment |
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
1
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
2 hours ago
add a comment |
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
content: "";
position: relative;
bottom: 0;
left:0;
right:0;
height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
background: #fff; /* match this with your parent element background colour*/
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
add a comment |
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
content: "";
position: relative;
bottom: 0;
left:0;
right:0;
height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
background: #fff; /* match this with your parent element background colour*/
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
add a comment |
0
0
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
content: "";
position: relative;
bottom: 0;
left:0;
right:0;
height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
background: #fff; /* match this with your parent element background colour*/
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
content: "";
position: relative;
bottom: 0;
left:0;
right:0;
height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
background: #fff; /* match this with your parent element background colour*/
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
edited 3 hours ago
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
answered 3 hours ago
vaibhav kumarvaibhav kumar
295
295
add a comment |
add a comment |
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>answered 3 hours ago
aridlehooveraridlehoover
1,8041615
add a comment |
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>answered 3 hours ago
aridlehooveraridlehoover
1,8041615
add a comment |
0
0
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>answered 3 hours ago
aridlehooveraridlehoover
1,8041615
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>.qa
border-top: 1px solid #ccc;
.qa:nth-child(-n+2)
border-top: none;
<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>answered 3 hours ago
aridlehooveraridlehoover
1,8041615
answered 3 hours ago
aridlehooveraridlehoover
1,8041615
answered 3 hours ago
aridlehooveraridlehoover
1,8041615
answered 3 hours ago
aridlehooveraridlehoover
1,8041615
1,8041615
add a comment |
add a comment |
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.qa:not(:nth-child(-n+2))
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>answered 1 hour ago
GeatGeat
208110
add a comment |
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.qa:not(:nth-child(-n+2))
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>answered 1 hour ago
GeatGeat
208110
add a comment |
0
0
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.qa:not(:nth-child(-n+2))
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>answered 1 hour ago
GeatGeat
208110
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.qa:not(:nth-child(-n+2))
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>.qa:not(:nth-child(-n+2))
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>.qa:not(:nth-child(-n+2))
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>answered 1 hour ago
GeatGeat
208110
answered 1 hour ago
GeatGeat
208110
answered 1 hour ago
GeatGeat
208110
answered 1 hour ago
GeatGeat
208110
208110
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55480980%2fhow-to-remove-border-from-elements-in-the-last-row%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
4 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
4 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
4 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
3 hours ago