Как обратиться к тэгу?

Question

[Дмитрий]

Есть такая структура:

Как при условии .slider.active обратиться к .main-item? .slider.active + .main-item сработало бы в том случае, если б .main-item был после .slider.active. На сколько я знаю, использование ~ должно помочь, но как-то нет. Остается только js?

Comments

[iBird Rose]

нельзя обратиться вверх по дереву в css. никак. меня местами элементы

[Дмитрий]

iBird Rose: спасибо, буду знать)

Answer 1

[Сергей delphinpro]

Расположите .main-item после .slider.active, поменяйте порядок флексом и обращайтесь через плюсик.

На сколько я знаю, использование ~

~ тоже работает только на последующие элементы (а + только на следующий)

UPD https://jsfiddle.net/1whm1g4o/3/

Comments

[Дмитрий]

Блоки имеют стилизацию, местами поменять не получится) А на счет ~ спасибо за уточнение

[Сергей delphinpro]

Дмитрий: не понял. ведь визуально они как раз раз расположатся так же как сейчас? Вы поняли, что я сказал про изменение порядка блоков с помощью флекс-бокс?

[Сергей delphinpro]

Дмитрий: https://jsfiddle.net/1whm1g4o/2/

[Дмитрий]

Сергей: Смотрите.
Когда я по клику на заголовок открываю аккордеон, списку задается класс .active. И если список имеет этот класс, то заголовок должен поменять цвет.

[Дмитрий]

Сергей: ага, теперь понял

[Сергей delphinpro]

Дмитрий: Смотрю. Проблемы не вижу ) Ну поменяете в скрипте next() на prev() или что вы там используете для аккордеона...

[Дмитрий]

Сергей: спасибо за способ, как-то не додумался :)

[Сергей delphinpro]

Дмитрий: У вас аккордеон самописный? Почему бы тогда не пойти простым путём и не вешать класс .active на li? Все проблемы разом решаются )

Answer 2

[ukoHka]

Как вариант, можно устанавливать active не только к .slider, но и к .main-item или даже к родительскому li.

Comments

[Дмитрий]

Вы не поняли. Если .slider имеет класс .active, то нужно стилизовать .main-item

[ukoHka]

Дмитрий: Для указанного конкретного примера, когда в родительском li всего два элемента, решение работает. Если же количество элементов варьируется, и .main-item всегда строго перед .slider.active, то только js

[ukoHka]

Хотя нет, кажется я не совсем правильно интерпретировал принцип работы :first-child

[Дмитрий]

ukoHka: да :)