Sizing Elemente basierend auf der Anzahl der Geschwister in einem einzigen Behälter SCSS

Question

Ich habe dieses Beispiel:

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

... und die Artikel- # könnte so hoch sein wie 48. Was will ich Ziel zu tun ist, jedes einzigartige .item- # und geben Sie ihm eine andere Farbe.

Ich habe versucht, mit diesem in SCSS Herumspielen:

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

... aber es hat nicht funktioniert. Ich habe hier eine ähnliche Lösung gefunden: Can CSS detect the number of children an element has?, aber der Unterschied ist, dass ich alle .item- # in einen einzigen Container verpacken muss.

Ich möchte JavaScript vermeiden.

Answer 1

CSS bietet keine Möglichkeit, ein Element basierend auf der Anzahl der Geschwister, die demselben Selektor entsprechen, abzugleichen. Siehe Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

Es gibt keine reinen CSS-Problemumgehungen in der Zwischenzeit.

---

Selektoren :nth-child(An+B of S) Notation der 4 wird diese Fähigkeit zur Verfügung stellen (ärgerlicherweise, gibt es keine gleichwertigen funktionalen Notation für :only-child() noch) nicht, aber sie haben immer noch die Wähler S im Voraus wissen. Das ist, wo Ihr SCSS nützlich sein wird:

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

Überraschenderweise obwohl Selektoren 4 noch ein instabiler Entwurf ist und niemand außer Safari hat diese Erweiterung :nth-child() noch nicht umgesetzt ist, werden diese kompilieren korrekt mit der aktuellen Version von Sass . Da es nicht implementiert ist, wird es natürlich nicht funktionieren. Trotzdem ist es schön zu wissen, dass wir dies in der Zukunft tun können (vorausgesetzt, die Implementierung von Safari bleibt und alle folgen dem Beispiel).