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

Question

[vohaha]

Есть такая структура 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}) {  // ни так не работает
        //что-то;
    }
}

Comments

[Иван Беленков]

А что за ошибку выдаёт? И какую версию SASS используете? Потому что на данный момент в SCSS песочнице у меня работают все ваши варианты. Может обновление SASS поможет?

[Иван Беленков]

sassmeister.com/gist/219d7021d9d04ad3fc29

[vohaha]

@IoannGrozny я извиняюсь, плохо объяснил. Ошибки нет, все хорошо, но оно ищет ближайшего родителя .icon и так как это .name1, name2... , то весь написанный css предназначается несуществующим блокам .icon. Я спрашивал возможно ли указать родителя элемента, т.е. что бы родительским считался .mainForm. И так как в .mainForm- 2 (в данном случае) элемента с классом .icon, то SCSS код будет работать.

Answer 1

[Иван Беленков]

ААА, я догнал. Проблема не в SASS, проблема в механике работы CSS. В таком случае, я вам помогу. Перебирать нужно селекторы, которые лежат на одном уровне друг с другом. Вот так:

@for $i from 1 to 5
    li:nth-child(#{i}) .icon {
        some: rule;
    }