skv skv - 1 year ago 152
CSS Question

Style an element based on its position within a group

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

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
or any other feature.

Answer Source

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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download