Can one use :nth-child to select elements where n is equal to n of a different element?

Question

Would it be possible to write CSS to select elements where their n is equal to the n of another element in the same selector:

input:nth-child(1):checked ~ div > div:nth-child(1)
input:nth-child(2):checked ~ div > div:nth-child(2)
input:nth-child(3):checked ~ div > div:nth-child(3)
...
input:nth-child(n):checked ~ div > div:nth-child(n)

Does CSS support this capability, or would everything have to be written out line-by-line?

No. You can't relate to the first seleted `n` with second `n` — Suresh Ponnukalai, Apr 15 '21 at 04:22
update your logic, put the input next to the divs and you can use `+` instead of `~` then consider label to place the *visual clickable* element where you want — Temani Afif, Apr 15 '21 at 10:42

score 1 · Accepted Answer · answered Apr 15 '21 at 15:51

Selectors doesn't support variables or backreferences of any kind, in either attribute selectors (1 2) or functional pseudo-classes such as :nth-child(). You cannot use custom properties in selectors either.

As with attribute selectors in the first two links above, you can use a preprocessor to automate this but the resulting CSS file will still contain a hardcoded list of all the possibilities.

Can one use :nth-child to select elements where n is equal to n of a different element?

1 Answers1