My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div named .counter-wrap.
I initially attempted to use .counter-wrap: last-of-type, but it did not work as each .counter-wrap resides within its own .col class. Is there a way to achieve this using a pseudo-element, or would assigning a unique ID to the last .counter-wrap and setting margin-bottom: 0 be a better approach?
body {
color: black;
font-size: 15px;
}
.wrap {
width: 600px;
margin: 0 auto;
}
.container,
.container-long {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
.row {
margin-left: -15px;
margin-right: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
padding-right: 15px;
padding-left: 15px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.counter-wrap {
margin-bottom: 40px;
}
.counter-text,
.counter-number {
display: block;
text-align: center;
text-transform: uppercase;
color: black;
}
.counter-text {
letter-spacing: normal;
font-weight: 400;
}
.counter-number {
font-size: 60px;
font-weight: 500;
}<div class="wrap">
<div class="container">
<div class="row">
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
</div>
</div>
</div>