CSS : last child no border
30,674
If you have this CSS
.menu li {
border-bottom: .1rem solid #CCC;
padding: 0;
}
.menu li:last-child {
border: none;
}
.menu li a,
.menu li div {
display: block;
padding: .5rem 0rem .5rem;
border-bottom: .1rem solid #ccc
}
Then you are correctly removing the border from the last li
. However any link or div inside that li
will still have a bottom border.
So you need to remove that with:
.menu li:last-child a,
.menu li:last child div {
border-bottom: none
}
Author by
Admin
Updated on July 09, 2022Comments
-
Admin almost 2 years
Hi I have a problem with my CSS I have used this rule before but somehow it's not working this time
I am trying to make a list that has a border on the bottom of every list item but the last. I have the following code:
.menu li { border-bottom: .1rem solid #CCC; padding: 0; } .menu li:last-child { border: none; } .menu li a, .menu li div { display: block; padding: .5rem 0rem .5rem; border-bottom: .1rem solid #ccc }
<div class="panel"> {% comment %} {% endcomment %} <h1>All {{team.abbrev}} {% trans "Songs" %}</h1> {% for chant in chants %} {% with chant.team as team %} <ul class="menu"> <li> <span> <h6 style="margin-bottom:0;"> <a href="{% url 'chant' team.slug chant.slug %}">{{ forloop.counter}}) {{ chant.name }}</a> </h6> </span> </li> </ul> {% if forloop.counter == 5 %} {% include 'inc/adsense_listing.html' %} {% endif %} {% endwith %} {% endfor %} </div>