Элементы калибровки, основанные на количестве братьев и сестер в одном контейнере SCSS

У меня есть этот пример:

<div class="container">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-2"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
</div>

... и item-# может достигать 48. То, что я хочу сделать, - это указать на каждый уникальный .item- # и присвоить ему другой цвет.

Я попытался сыграть с этим в SCSS:

@for $i from 1 through 48 {
    .item-#{$i} { 
       &:nth-child(1):nth-last-child(2),
       &:nth-child(2):nth-last-child(1) { 
            color: red; } 
       }
}

... но это не сработало. Я нашел подобное решение здесь: Может ли CSS определить количество дочерних элементов, имеющих элемент?, но разница в том, что мне нужно все .item- #, чтобы быть обернутым в один контейнер.

Я бы хотел избежать использования JavaScript.

Ответ 1

CSS не предоставляет возможность сопоставлять элемент, основанный на количестве братьев и сестер, которые соответствуют одному и тому же селектору. См. Могу ли я объединить: nth-child() или: nth-of-type() с произвольным селектором?

В то же время нет чистых CSS-обходных решений.

Селекторы 4 :nth-child(An+B of S) обозначают эту возможность (досадно, что для :only-child() нет эквивалентной функциональной нотации), но вам все же нужно заранее знать селектор S. То, что ваш SCSS пригодится:

@for $i from 1 through 48 {
    :nth-child(1 of .item-#{$i}):nth-last-child(1 of .item-#{$i}) {
        // Styles
    }
}

Удивительно, хотя Selectors 4 по-прежнему является нестабильной чертой, и никто кроме Safari не выполнил это расширение до :nth-child(), но это будет правильно скомпилировано с текущей версией Sass. Конечно, поскольку он не реализован, он фактически не работает. Тем не менее, приятно знать, что мы сможем это сделать в будущем (при условии, что реализация Safari останется, и все последуют примеру).