How to remove border form elements in the last row?
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 29 mins ago
Temani Afif
81.8k104793
asked 2 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 29 mins ago
Temani Afif
81.8k104793
asked 2 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
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
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
1 hour 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 29 mins ago
Temani Afif
81.8k104793
asked 2 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 29 mins ago
Temani Afif
81.8k104793
asked 2 hours ago
supersansupersan
1,7871837
edited 29 mins ago
Temani Afif
81.8k104793
asked 2 hours ago
supersansupersan
1,7871837
edited 29 mins ago
Temani Afif
81.8k104793
edited 29 mins ago
Temani Afif
81.8k104793
edited 29 mins ago
Temani Afif
81.8k104793
81.8k104793
asked 2 hours ago
supersansupersan
1,7871837
asked 2 hours ago
supersansupersan
1,7871837
asked 2 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
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
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
1 hour 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
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
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
1 hour ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
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
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
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
1 hour ago
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour ago
add a comment |
6 Answers
6
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
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
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
58 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
34 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 |
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
6 Answers
6
active
oldest
votes
6 Answers
6
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
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
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
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
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
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
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 1 hour 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
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
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 |
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
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
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
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
@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
58 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
34 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
58 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
34 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 31 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
58 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
34 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
58 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
34 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
58 mins 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
58 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
34 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
34 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 |
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
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
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
1 hour ago