Comment verbaliser cette sélection de classe css?

[karlito]

Bonjour,

Je n’arrive pas à verbaliser correctement cette sélection de classe CSS:

.navigation ul li:nth-child(1).active ~ .indicator {
  transform: translateX(calc(70px * 0));
}

le html:

<div class="navigation">
      <ul>
        <li class="list active">
          <a href="#">
            <span class="icon"><ion-icon name="home"></ion-icon></span>
            <span class="text">Home</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon"><ion-icon name="person"></ion-icon></span>
            <span class="text">Profile</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon"><ion-icon name="chatboxes"></ion-icon></span>
            <span class="text">Message</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon"><ion-icon name="camera"></ion-icon></span>
            <span class="text">Photos</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon"><ion-icon name="settings"></ion-icon></span>
            <span class="text">Settings</span>
          </a>
        </li>
        <div class="indicator"></div>
      </ul>
    </div>

L’indicator se déplace en fonction du “li” activé

Ma supposition:
Cas ou on ajoute la classe active au li voisin de 1 par rapport au li en classe déja active et voisin de la classe indicator.?