CSS : last child no border

Question

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>

Gifferd

Please post only rendered HTML, not pre-compiled code. – Christoperchristoph

You have multiple bottom borders on <a>, <div> as well as <li>. The last-child is working just fine, but it is only set for the list item. – Kazmirci

could you suggest how I should write the CSS? I have tried several methods but cannot get it to work. Sorry, a bit of a newbie. – Gifferd

It seems like you don't want that border, why not remove it from the a and div? While you are at it, you can remove all those HTML elements that don't seem needed: <span> and <h6> seem redundant here. Example here – Kazmirci

Answer 1

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
}

Cardinal

Answer 2

The last child border none is working fine in your case. But you have written style for

.menu li a,
.menu li div {
  display: block;
  padding: .5rem 0rem .5rem;
  border-bottom: .1rem solid #ccc
}

Instead write in two different css rules:

.menu li a {
  display: block;
  padding: .5rem 0rem .5rem;
}
.menu li div {
  display: block;
  padding: .5rem 0rem .5rem;
  border-bottom: .1rem solid #ccc
}

Winnifredwinning

Answer 3

Change

.menu li {
  border-bottom: .1rem solid #CCC;
  padding: 0;
}

.menu li:last-child {
  border: none;
}

to

.menu li:not(:last-of-type) {
  border-bottom: .1rem solid #CCC;
}

.menu li {
  padding: 0;
}

Edited:

Remove your border-bottom at a and div

Croteau

Answer 4

.menu li a,
.menu li div {
 display: block;
 padding: .5rem 0rem .5rem;
 border-bottom: .1rem solid #ccc;/* if you remove this border then it      will completely remove the border. Because of this last item border is showinfiddle for you: https//jsfiddle.net/rakib32/bb0qokn1/9/. Please have a look at it.

Cham