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.

nope, unfortunately.. but it'd be good – sertsedat May 30 '16 at 14:46 — sertsedat, May 30 '16 at 14:46

score 3 · Accepted Answer · edited May 23 '17 at 10:33

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:

score 1 · Answer 2 · answered May 30 '16 at 15:09

1

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.

answered May 30 '16 at 15:09

RusAndreev

86
1
5

Thank you, scss is certainly the way to go – skv May 31 '16 at 04:05

Style an element based on its position within a group

2 Answers2