Как связать блоки в данной структуре, чтобы при ховере была взаимосвязь?

Question

[PantyDev]

Здравствуйте. Вопрос по идее очень легкий, но я глупый, поэтому помогите.
В общем есть такая структура элементов:

<div class="outer__wrapper">
        <div class="outer__element" id="element-0">Outer Test0</div>
        <div class="outer__element" id="element-1">Outer Test1</div>
        <div class="outer__element" id="element-2">Outer Test2</div>
        <div class="inner__wrapper">
            <div class="inner__element" id="element-0">Outer Test0</div>
            <div class="inner__element" id="element-1">Outer Test1</div>
            <div class="inner__element" id="element-2">Outer Test2</div>
        </div>
</div>

Мне необходимо чтобы при наведении на каждый outer__element можно было взаимодействовать с соответсвенным ему inner__element'ом. Т. е., например при наведении на Outer Test2 менялся цвет у Outer Test2
нужно что-то типа такого -

#element-*.outer__element:hover ~ .inner__wrapper #element-*.inner__element {
      background-color: red
}

Но ведь так работать не будет, я прав?)

Comments

[Сергей Сергей]

Каждую пару придётся указать

#element-0:hover ~ .inner__wrapper #element-0,
#element-1:hover ~ .inner__wrapper #element-1,
...
{
      background-color: red;
}

И id у элементов на странице не должны повторяться, по идее.

[Ankhena]

Вам нужно заменить в какой-то из частей id на data- атрибут. Потому что id не могут повторяться в рамках одной страницы.

<div class="outer__wrapper">
        <div class="outer__element" data-target="element-0">Outer Test0</div>
        <div class="outer__element" data-target="element-1">Outer Test1</div>
        <div class="outer__element" data-target="element-2">Outer Test2</div>
        <div class="inner__wrapper">
            <div class="inner__element" id="element-0">Outer Test0</div>
            <div class="inner__element" id="element-1">Outer Test1</div>
            <div class="inner__element" id="element-2">Outer Test2</div>
        </div>
</div>

И дальше в стилях указываете через запятую селекторы для каждой пары.

[data-target="element-0"]:hover ~ .inner__wrapper #element-0

[PantyDev]

Это вообще возможно сделать?

[Антон Литвиненко]

в ответах на вопрос пишут ответы на вопрос. коментарии в коментариях

[PantyDev]

Антон Литвиненко, ок

Answer 1

[Наталья]

Я не знаю, как сделать общую запись, но может вам поможет:
1. На одной странице не может быть одинаковых id.
2. Если прописать соответствующие id, то селекторы будут так работать
https://codepen.io/vxmqzrjw-the-lessful/pen/VwyGyEK