Is there any way to increment a CSS value depending on nth-child variable?

1.4k views Asked by At

This is probably a long shot but, here it goes:

I have this:

<style>
    .select-option.hidden:nth-child(2) {
        top: 65px;
    }
    .select-option.hidden:nth-child(3) {
        top: 100px;
    }
    .select-option.hidden:nth-child(4) {
        top: 135px;
    }
    .select-option.hidden:nth-child(5) {
        top: 170px;
    }
    .select-option.hidden:nth-child(6) {
        top: 205px;
    }
</style>

I want something like this:

.select-option.hidden:nth-child(n+2) {
    top: (30+((n-1)*35))px;
}

Starting at the second child and at offset = 30px and adding 35px to every child.

I donĀ“t want to use SASS or other creepy stuff.

1

There are 1 answers

2
Josh Beam On BEST ANSWER

The simple answer, given the limitations you've provided (no SASS or other creepy stuff), is no, it's not possible with CSS.