How to exclude css on from last element of li - css

Question

I have the following css operating on my navbar elements
.nav-link:after {
content: "|";
font-weight:700;
color:#5E7B65;
padding-right: 10px;
padding-left: 5px;
}
running on the following html:
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">aaa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">ddd</a>
</li>
</ul>
How do i make it so it does not effect the last element

Answer 1

You can use the selector :not(:last-child) that applies the css to all elements except
the last one
.nav-link:not(:last-child):after {
content: "|";
font-weight:700;
color:#5E7B65;
padding-right: 10px;
padding-left: 5px;
}

Answer 2

.nav-link:not(:last-child):after

Answer 3

This is what you're looking for:
.nav-item:not(:last-child) .nav-link::after {
content: "|";
font-weight: 700;
color: #5E7B65;
padding-right: 10px;
padding-left: 5px;
}
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">aaa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">ddd</a>
</li>
</ul>
Because you need the last parent item of .nav-link, since your nav-item elements are wrapped in a container, you can use the :not pseudo selector to select all of the .nav-item elements except for the last one, and then style the child nav-link element.