Как убрать DOM элемент?

Question

[Владислав Линник]

Не убирается последняя вертикальная линия
Не работает .circle:last-child::before

Сайт: protester.zzz.com.ua

Answer 1

[Ankhena]

:last-child берет последний элемент своего родителя.

Ваша структура

<li class="nav-menu__item clearfix">
  <div class="circle">
     <div class="inside-circle"></div>
  </div>
  <a href="#about-us" class="nav-menu__link">О нас</a>
 </li>

И .circle:last-child::before Последний элемент родителя элемента с классом .circle
И выходит это ссылка nav-menu__link

Вывод: начинать надо с nav-menu__item:last-child .circle::before {}

Comments

[Владислав Линник]

Большое спасибо, помогло!
Теперь интересно когда может пригодится структура вида .селектор:last-child::before

[Ankhena]

Владислав Линник, Если бы вы палки приделывали к li

[Владислав Линник]

Ankhena, так яснее, спасибо вам :)

[Ankhena]

Владислав Линник, А это еще не все ))))

https://jsfiddle.net/cax2gkr6/

У вас слишком много лишних оберток.
1. Кружки делаются радиальным градиентом.
2. И еще есть волшебная конструкция li:not(:last-child)::after
Т.е. добавить псевдоэлемент (палочку) для всех кроме последнего.

Но хорошо бы переделать наоборот li:not(:first-child)::after, а палки направлять вверх.

Answer 2

[Alexander]

Потому, что .circle не является последним ребенком, после него еще есть .nav-menu__link. Вам нужно выбрать последний пункт меню, т.е. li и в нем уже выбрать .circle
.nav-menu .nav-menu__item:last-of-type .circle:before вот так сработает.