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

Question

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.

"I don´t want to use SASS or other creepy stuff." Why is SASS creepy? That's exactly what it's for. — Josh Beam, Jun 18 '15 at 14:48
Simply... **no**, not yet. Not until [**CSS variables**](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) come along. — Paulie_D, Jun 18 '15 at 14:51
@JoshBeam Yeah, I suppose. Let´s say that I apply the KISS principle where I can. Nothing wrong with SASS, if you really need it, but I will not drag it into my solution atm to ONLY resolve this single issue. — Marcus, Jun 18 '15 at 14:53
Yeah I totally understand where you're coming from, but unfortunately, to do exactly what you're trying to do, you can't do it with CSS. The first step I would suggest is making sure that the solution you're coming up with above is really the correct solution to the problem (in engineering they say something like, "don't try to solve a solution, try to solve a problem". — Josh Beam, Jun 18 '15 at 14:56
@Paulie_D: It's unlikely that cascading variables will provide a solution to this either. — BoltClock, Jun 18 '15 at 14:56
Perhaps you need to demo the actual problem then because this seems a funky thing to do anyway. — Paulie_D, Jun 18 '15 at 14:56
Haha, really, the mob on this site is really becoming a fascinating beast. I suppose the downvote is a demonstration of criticism - not of my question, but because I have stated that I have made the choice not to implement one of the currently existing frameworks that could solve my problem. This is of course in my(!) solution, of which you have no knowledge except what is provided in this question. Geez.. — Marcus, Jun 18 '15 at 14:57
I once tought about doing it with counters, but no success (http://stackoverflow.com/questions/26103282/css-use-counter-number-as-propertys-value) — LcSalazar, Jun 18 '15 at 15:04
@Marcus is correct, there was no reason for a down vote. This is a legitimate question. A down vote should be used for a question that is off topic or lacks detail about a problem; not for a question that is trying to solve something without a specific framework/methodology. — Josh Beam, Jun 18 '15 at 15:07

score 3 · Accepted Answer · answered Jun 18 '15 at 14:52

3

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

answered Jun 18 '15 at 14:52

Josh Beam

19,292
3
45
68

I suppose you are right, thank you for your answer. Will mark as correct when possible. Possibly I´ll use SASS if I see further use for it down the road. – Marcus Jun 18 '15 at 14:59
1

@Marcus, Okay, no problem. Another option is to use JavaScript, but that may end up requiring you to set inline styles, which can get a little bit tangled up. That's why usually SASS would be the first go-to in this situation because 1) it's dynamic and 2) it keeps all the styles in a stylesheet. – Josh Beam Jun 18 '15 at 15:04

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

1 Answers1

Linked