Как исключить css из последнего элемента li

Question

У меня есть следующие css, работающие на моих элементах navbar

.nav-link:after {
content: "|";
font-weight:700;
color:#5E7B65;
padding-right: 10px;
padding-left: 5px;
}

, работающие на следующих 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>

Как мне сделать так, чтобы это не эффект последнего элемента

Answer 1

Вы можете использовать селектор: не (: последний ребенок), который применяет css ко всем элементам, кроме последнего

   .nav-link:not(:last-child):after {
    content: "|";
    font-weight:700;
    color:#5E7B65;
    padding-right: 10px;
    padding-left: 5px;
    }

Answer 2

Это то, что вы ищете:

.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>

Поскольку вам нужен последний родительский элемент .nav-link, поскольку ваши элементы nav-item заключены в контейнер, вы можете использовать псевдо :not селектор для выбора всех элементов .nav-item, за исключением последнего, а затем стиль дочернего элемента nav-link.

Answer 3

.nav-ссылка: нет (: последний ребенок): после