@vohaha

Как сделать выборку объекта от определенного родителя с помощью nth-child и SCSS?

Есть такая структура html
<form class="mainForm">
<ul>
   <li class="name1">
      <input class="inpt1" type="text"/>
      <img class="icon" src="img/1.png" alt="">
   </li>
   <li class="name2">
      <input class="inpt2" type="text"/>
      <img class="icon" src="img/2.png" alt="">
   </li>
</ul>
</form>

Возможно ли перебрать все .icon относительно .main-form?
$list: 2s, 2.5s, 3s, 3.5s;
@for $i from 1 to 5 {
    //.icon:nth-child(#{$i}) { ни так
    .mainForm .icon:nth-child(#{$i}) {  // ни так не работает
        //что-то;
    }
}
  • Вопрос задан
  • 2288 просмотров
Пригласить эксперта
Ответы на вопрос 1
@IoannGrozny
Front-end разработчик
ААА, я догнал. Проблема не в SASS, проблема в механике работы CSS. В таком случае, я вам помогу. Перебирать нужно селекторы, которые лежат на одном уровне друг с другом. Вот так:
@for $i from 1 to 5
    li:nth-child(#{i}) .icon {
        some: rule;
    }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы