<div class="wrap">
<div class="headlines"></div>
<div class="headlines"></div>
<div class="headlines"></div>
<div class="headlines"></div>
<div class="headlines"></div>
</div>
border-bottom set on the class .headlines - But how should I nullify the border-bottom on the last headline div i.e. last child of wrap div?
Above is a hypothetical situation. The number of headlines DIV’s are not fixed.
Try
.headlines:last-child {
border-bottom: none;
}
Already tried. Doesn’t work.
headlines div are the child of wrap.
Yes, It does
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.headlines {
min-height:2em;
margin:1em;
background:lightblue;
border-bottom:1px solid;
}
.headlines:last-child {
border-bottom:none;
background:yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="headlines"></div>
<div class="headlines"></div>
<div class="headlines"></div>
<div class="headlines"></div>
<div class="headlines"></div>
</div>
</body>
</html>
Because the last child of ‘main’ is a div without the ‘headlines’ class. Wrap your headlines in their own div, and the CSS will work.
The example on the MDN page for last-child may help explain the concept.
Alternatively, based on the HTML you have presented there,
article:last-of-type would also select the correct element.
Yes! Yes! Yes! Yes! Yes!
Do you know why :last-child did not work and :last-of-type works?
Yes, because last headline was not actually the last child.
it worked because it was tragetting the last of article type(last article child).
Do I pass the understanding test?
Be careful with that last sentence.
It’s targetting the last article within the container.
<div>
<article>1</article>
<article>2</article>
</div>
<div>
<article>3</article>
<article>4</article>
</div>
In this instance, article:last-of-type will target both article 2 and 4.
Yes, I am aware last of article in the wrap div.
Yes, Yes. The point is clear to me. Thank you for extending the support to eliminate any possibility of any doubt.
Well done 
Your appreciation is like pulitzer prize for me. You are mostly skeptic that I am lazy and do not work hard and immediately come here to seek help. 
Off Topic →
Initially, I feel annoyed by you. I thought you always bully me when others are helping me. But later I realized you are my well-wisher. You knew that I am more capable, but I am not giving full 100% in learning concepts but looking for a slipshod remedy and immediate gratifications.
Generally, People and society yell at you. Who in this world care for someone else that he should excel in life. Thank you so much for thinking for me and taking the pain to guide me so that I should truly excel in life.
On the same link that I shared above I am struggling to align “+” sign in vertical middle. Please help me to move in forward direction.
Please open the image in new browser.
Use flex as that’s what it’s good at.
e.g.
.load-more {display:flex;justify-content:center;}
.load-more a{display:flex;align-items:center;padding:10px 40px;}
.load-more span{margin-left:.2em;}
I know you have it sorted out now.
Next time post the correct html in your first post to avoid confusion. 
I was working with the html you gave in your first post.
Sure.