How to fetch an object from a specific parent using nth-child and SCSS?

Question

css

There is a html structure like this

<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>

Is it possible to iterate over all .icons relative to .main-form?

$list: 2s, 2.5s, 3s, 3.5s;
@for $i from 1 to 5 {
    //.icon:nth-child(#{$i}) { ни так
    .mainForm .icon:nth-child(#{$i}) {  // ни так не работает
        //что-то;
    }
}

Answer 1

Ahh, I got it. The problem is not with SASS, the problem is with the mechanics of how CSS works. In that case, I will help you. Iterate over selectors that are on the same level as each other. Like this:

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