How to remove border form elements in the last row?Targeting flex items on the last rowHow to vertically wrap content with flexbox?How do you disable browser Autocomplete on web form field / input tag?Remove border from IFrameCSS3'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
Spam email "via" my domain, but SPF record exists
How to install cross-compiler on Ubuntu 18.04?
What do you call someone who asks many questions?
What are the G forces leaving Earth orbit?
What reasons are there for a Capitalist to oppose a 100% inheritance tax?
What is a Samsaran Word™?
Blending or harmonizing
Rotate ASCII Art by 45 Degrees
How to calculate the right interval for a timelapse on a boat
Why can't we say "I have been having a dog"?
In Bayesian inference, why are some terms dropped from the posterior predictive?
Getting extremely large arrows with tikzcd
Machine learning testing data
What is this scratchy sound on the acoustic guitar called?
How obscure is the use of 令 in 令和?
How badly should I try to prevent a user from XSSing themselves?
Does the Idaho Potato Commission associate potato skins with healthy eating?
Do creatures with a speed 0ft., fly 30ft. (hover) ever touch the ground?
Do Iron Man suits sport waste management systems?
Can someone clarify Hamming's notion of important problems in relation to modern academia?
Car headlights in a world without electricity
How to remove border form elements in the last row?
Is it possible to map the firing of neurons in the human brain so as to stimulate artificial memories in someone else?
How could indestructible materials be used in power generation?
How to remove border form elements in the last row?
Targeting flex items on the last rowHow to vertically wrap content with flexbox?How do you disable browser Autocomplete on web form field / input tag?Remove border from IFrameCSS3'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 43 mins ago
Temani Afif
81.8k104793
asked 3 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 43 mins ago
Temani Afif
81.8k104793
asked 3 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
3 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
2 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 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 43 mins ago
Temani Afif
81.8k104793
asked 3 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 43 mins ago
Temani Afif
81.8k104793
asked 3 hours ago
supersansupersan
1,7871837
edited 43 mins ago
Temani Afif
81.8k104793
asked 3 hours ago
supersansupersan
1,7871837
edited 43 mins ago
Temani Afif
81.8k104793
edited 43 mins ago
Temani Afif
81.8k104793
edited 43 mins ago
Temani Afif
81.8k104793
81.8k104793
asked 3 hours ago
supersansupersan
1,7871837
asked 3 hours ago
supersansupersan
1,7871837
asked 3 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
3 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
2 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 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
3 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
2 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
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
3 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
2 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
2 hours ago
4
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
2
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 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 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour 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
1 hour 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 1 hour 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 2 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 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
1 hour 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 1 hour 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
1 hour 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
47 mins 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 2 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 1 hour 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 2 mins 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-form-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 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour 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
1 hour 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 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour 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
1 hour 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 1 hour ago
Temani Afif
81.8k104793
answered 1 hour 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 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
edited 1 hour ago
Temani Afif
81.8k104793
edited 1 hour ago
Temani Afif
81.8k104793
edited 1 hour ago
Temani Afif
81.8k104793
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour 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
1 hour ago
add a comment |
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour 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
1 hour ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour 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
1 hour 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
1 hour 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 1 hour 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 1 hour 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 1 hour 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 1 hour ago
zhirzhzhirzh
1,6801723
answered 1 hour ago
zhirzhzhirzh
1,6801723
answered 1 hour ago
zhirzhzhirzh
1,6801723
answered 1 hour 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 2 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 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
1 hour 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 2 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 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
1 hour 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 2 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 2 hours ago
Michael_BMichael_B
157k50255363
edited 2 hours ago
answered 2 hours ago
Michael_BMichael_B
157k50255363
answered 2 hours ago
Michael_BMichael_B
157k50255363
answered 2 hours ago
Michael_BMichael_B
157k50255363
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 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
1 hour ago
add a comment |
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 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
1 hour ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 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
1 hour 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
1 hour 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 1 hour 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
1 hour 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
47 mins 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 1 hour 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
1 hour 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
47 mins 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 1 hour 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 1 hour ago
Temani AfifTemani Afif
81.8k104793
edited 45 mins ago
answered 1 hour ago
Temani AfifTemani Afif
81.8k104793
answered 1 hour ago
Temani AfifTemani Afif
81.8k104793
answered 1 hour 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
1 hour 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
47 mins 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
1 hour 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
47 mins 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
1 hour 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
1 hour 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
47 mins 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
47 mins 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 2 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 2 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 2 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 2 hours ago
vaibhav kumarvaibhav kumar
295
edited 1 hour ago
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
answered 2 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 1 hour 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 1 hour 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 1 hour 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 1 hour ago
aridlehooveraridlehoover
1,8041615
answered 1 hour ago
aridlehooveraridlehoover
1,8041615
answered 1 hour ago
aridlehooveraridlehoover
1,8041615
answered 1 hour 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 2 mins 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 2 mins 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 2 mins 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 2 mins ago
GeatGeat
208110
answered 2 mins ago
GeatGeat
208110
answered 2 mins ago
GeatGeat
208110
answered 2 mins 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-form-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
3 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
2 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago