Style an element based on its position within a group

Question

I am trying to create a set of boxes. I want to try and see if I can set the size of the box based on its position within the group.

Currently this is possible if I know the number of boxes beforehand and use the :nth-child() selector and the appropriate position.

Since CSS already has the capability to find the position of the element in the group, is it possible to use this positioning as an input for the size.

So for example something like

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

This purpose can easily be achieved using a server side code or even Javascript but just curious to understand if we can use CSS to achieve this, using calc or any other feature.

Answer 1

In CSS Selectors Level 3, there are no methods for targeting an element then, using variables corresponding to that element's position within a group, tailoring styles for that element.

In CSS, the calc() function does not allow variables. Only mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) are allowed as component values.

With Sass, however, a CSS preprocessor, using variables in a calc() function is possible.

References:

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

Answer 2

You can't do this in pure css, but you can with scss. For example:

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

You can play with code here.