Stil ein Element basierend auf seiner Position innerhalb einer Gruppe

Question

Ich versuche, eine Reihe von Boxen zu erstellen. Ich möchte versuchen zu sehen, ob ich die Größe der Box basierend auf ihrer Position innerhalb der Gruppe festlegen kann.

Derzeit ist dies möglich, wenn ich die Anzahl der Boxen vorher kenne und den :nth-child() Selektor und die entsprechende Position benutze.

Da CSS bereits die Position des Elements in der Gruppe finden kann, ist es möglich, diese Positionierung als Eingabe für die Größe zu verwenden.

So zum Beispiel so etwas wie

#boxes:nth-child() { 
    height:calc(n * 10); 
    width:calc(n * 10); 
} 

Dieses Ziel leicht erreicht werden kann, einen Server-Side-Code oder auch Javascript verwenden, aber nur neugierig zu verstehen, wenn wir CSS dies zu erreichen, verwenden können, mit calc oder anderer Funktion .

Answer 1

In den CSS-Selektoren Level 3 gibt es keine Methoden, um ein Element zu targetieren und dann mit Hilfe von Variablen, die der Position dieses Elements innerhalb einer Gruppe entsprechen, Styles für dieses Element anzupassen.

In CSS lässt die calc()-Funktion keine Variablen zu. Nur mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) sind als Komponentenwerte zulässig.

Mit Sass ist jedoch ein CSS-Präprozessor, der Variablen in einer calc()-Funktion verwendet, möglich.

Referenzen:

• CSS Selectors Level 3
• 8.1. Mathematical Expressions: calc()
• Sass Variable in CSS calc() function
• Sass Variables

Answer 2

Sie können dies in reiner CSS nicht tun, aber man kann mit SCSS. Zum Beispiel:

@for $i from 1 through 5 { 
    .box:nth-child(#{$i}) { 
    height: 50px * $i; 
    } 
} 

Sie können here mit Code spielen.