Stile un elemento basato sulla sua posizione all'interno di un gruppo

Question

Sto provando a creare un set di scatole. Voglio provare e vedere se posso impostare la dimensione della scatola in base alla sua posizione all'interno del gruppo.

Attualmente questo è possibile se conosco il numero di caselle in anticipo e utilizzo il selettore :nth-child() e la posizione appropriata.

Poiché il CSS ha già la capacità di trovare la posizione dell'elemento nel gruppo, è possibile utilizzare questo posizionamento come input per la dimensione.

Così, per esempio qualcosa come

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

Questo scopo può essere facilmente raggiunto utilizzando un codice lato server o anche Javascript, ma solo curioso di capire se siamo in grado di usare i CSS per raggiungere questo obiettivo, utilizzando calc o qualsiasi altra caratteristica .

Answer 1

Nei selettori CSS Livello 3, non esistono metodi per il targeting di un elemento, quindi, utilizzando le variabili corrispondenti alla posizione di quell'elemento all'interno di un gruppo, personalizzare gli stili per quell'elemento.

In CSS, la funzione calc() non consente variabili. Solo le espressioni matematiche con addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/) sono consentite come valori dei componenti.

Con Sass, tuttavia, è possibile un preprocessore CSS, utilizzando le variabili in una funzione calc().

Riferimenti:

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

Answer 2

Non si può fare questo in puro css, ma è possibile con SCSS. Per esempio:

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

Si può giocare con il codice here.