Почему не получается выбрать элемент с :not():last-child?

Question

[Никита Нафранец]

Есть список

<ul class="hm__ul">
            <li class="hm__a-active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li class="hm__a-grey"><a href="#">7</a></li>
            <li class="hm__a-grey"><a href="#">8</a></li>
          </ul>

Мне нужно выбрать 6 элемент. Я пытаюсь задать .hm__ul li:not(.hm__a-grey):last-child или .hm__ul li:last-child:not(.hm__a-grey), но все не работает. Такое браузер вообще не умеет делать, либо я ошибку допускаю? Я не знаю по сколько возможно в будущем будет элементов в меню, поэтому использую такой способ. Пробывал еще .hm__ul li.hm__a-grey:first-child, но тоже не работает...

Comments

[Человек]

Возможно будет полезно.
https://css-tricks.com/useful-nth-child-recipies/

[Никита Нафранец]

Человек: я не знаю, будет ли 6 элемент, шестым.

[Сергей delphinpro]

По какому принципу вам нужно выбрать элемент? Словами опишите.

Answer 1

[Сергей delphinpro]

либо первый потомок с классом .hm__a-grey

.hm__ul > li:not(.hm__a-grey) + li.hm__a-grey { ... }

https://jsfiddle.net/rb04e89n/
https://jsfiddle.net/rb04e89n/1/

PS. Названия классов никуда не годятся. Обязательно пересмотрите этот момент и дайте нормальные имена.

Comments

[Никита Нафранец]

А что с названиями не так?

[sergey]

Никита Нафранец: в студии дали бы по рукам за такое название классов (имя класса должно быть понятно следующему верстальщику, что за класс, к чему относиться, и да возможность его трансформации в другой блок и т.д.), гляньте тот же БЕМ, это не панацея, но правильное направление

[Никита Нафранец]

SM: так я основываясь на беме и именую, выше этого меню у меня блок .header-menu. Я взял сокращение и получил .hm, а использую его, получил след. классы.

[sergey]

Никита Нафранец: ну так и пишите .header__menu, зачем это не понятное сокращение. Как по вашему следующий верстальщик должен понимать hm? Подобные сокращения просто не допустимы

[sergey]

Никита Нафранец: и еще в верстке приветствуется сокращение классов, но не подобное .hm, а именно не писать вот таких классов: .header__menu__block-left__advantages__list, все должно быть максимально развернуто и понятно и компактно, что бы любой человек, да и вы сами через год не ломали голову над кодом:)

[Никита Нафранец]

Вы говорите, что можно использовать сокращение в верстке, но приводите пример, что нельзя использовать длинное имя. Так что использовать то?

[Сергей delphinpro]

Никита Нафранец:

.header-menu {}  /* GOOD */
.header-menu__item {}  /* GOOD */
.header-menu__link {}  /* GOOD */

но не 

.hm {} /* BAD */
.hm__item {} /* BAD */
.header-menu__item__link {} /* BAD */

Answer 2

[Андрей Федоров]

Почему просто не использовать :nth-child(6), если вы знаете что он шестой?

Comments

[Никита Нафранец]

Я не знаю, что он будет 6

[Андрей Федоров]

Никита Нафранец: Хорошо, а что еще известно? Нужно выбрать элемент 3ий с конца?

[Никита Нафранец]

Андрей Федоров: больше ничего не известно, известно, что нужен элемент перед классом .hm__a-grey либо первый потомок с классом .hm__a-grey

[Андрей Федоров]

Никита Нафранец: пожалуй нельзя. давайте id

Answer 3

[Mr Crabbz]

Ваша ошибка в том, что вот такого элемента:

.hm__ul li:not(.hm__a-grey):last-child

у вас несуществует. Потому что :last-child всегда указывает на последний дочерний элемент в пределах родителя. То есть, у вас .hm__a-grey (с цифрой 9) - всегда last-child в любом случае. А элемент №6 - никогда :last-child не был и не будет, пока после него есть другие элементы.

Вашу задачу нельзя решить на CSS. Вам нужен js.

Answer 4

[Ankhena]

Не получается потому что :last-child выбирает последний элемент своего родителя, т.е. в данном случае 8-ой.
Вот такая Ваша конструкция: li:not(.hm__a-grey):last-child будет брать элементы li, у которых нет класса .hm__a-grey смотреть их родителя и искать у него последний элемент. А последний элемент родителя это опять таки 8-ой, вне зависимости от того к которому li Вы будете приписывать свойства.

В данном случае надо:
- Либо еще раз подумать над структурой данных - текущая выглядит странно с семантической точки зрения.
- Либо использовать JS