CODEWITHSUNDEEP
htmlcss
user7381027
user7381027

Reputation: 41

Last child not removing border bottom

HTML:

<div class="offer-section">
    <div class="divider"></div>
</div>
<div class="offer-section">
    <div class="divider"></div>
</div>
<div class="offer-section">
    <div class="divider"></div>
</div>
<div class="offer-section">
    <div class="divider"></div>
</div>

CSS:

.offer-section{
   .divider { border: solid 1px #bdbdc3; height: 2px; margin-top: 5%; }
}
.offer-section:last-child {
   .divider { }
}

Trying to add a divider to the bottom of every offer-section div except the last one. However the code above does not seem to be able to do the job. Would appreciate any help :)

Upvotes: 0

Views: 58

Answers (2)

Himanshu
Himanshu

Reputation: 1

.offer-section .divider {
    border: solid 1px #bdbdc3; height: 20px; margin-top: 5%;
}
.offer-section:nth-child(4) .divider{
    border-bottom: none;
}

Upvotes: 0

kmg
kmg

Reputation: 519

You need to provide proper CSS properties as per the requirement, as given below. 

.offer-section{
  .divider { border: solid 1px #bdbdc3; height: 2px; margin-top: 5%; }
}
.offer-section:last-child {
  .divider { border: none; }
}

Upvotes: 1

Related Questions