Using nth-of-type dynamically

Question

If I use nth-of-type to assign styling to an element, I have to pass n or a number into the selector: nth-of-type(1).

What I'm curious about is: if I wanted to write one single rule that would perform all 3 of the rules below, would it be possible?

I would have assumed the following would give me the result I needed:

input[type=radio]:nth-of-type(n):checked ~ .item-list div:nth-of-type(n)

My expectation would be that n would have to be equal on both sides of the rule. i.e. when checkbox 1 is checked, div 1 in the list would be pink. This doesn't seem to be the case though, and the only way I have found that makes this work is hardcoding the number.

input[type=radio]:nth-of-type(1):checked ~ .item-list div:nth-of-type(1),
input[type=radio]:nth-of-type(2):checked ~ .item-list div:nth-of-type(2),
input[type=radio]:nth-of-type(3):checked ~ .item-list div:nth-of-type(3) {
  color: pink;
}

<input type="radio" name="items" checked />
<input type="radio" name="items" />
<input type="radio" name="items" />

<div class="item-list">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

For the curious, I'm attempting this because of a demo I put together using Spectre CSS: https://plnkr.co/edit/XmO4wOWgDLWvoiq0XVzG?p=preview

It is not possible with CSS unless you change the markup and use the adjacent sibling selector. [jsfiddle](https://jsfiddle.net/rickyruizm/8hy75bbj/) — Ricky Ruiz, Mar 21 '17 at 16:47
@Ricky Interesting! I'll see if I can make that work. Trying to achieve a CSS-only tab effect. Will update if I get it. Thanks — aaron-bond, Mar 21 '17 at 16:57
Changing your HTML structure, and using flex-box, your current structure can be emulated, *but* this emulation in no way reduces the amount of CSS (and in fact, probably, vastly increases the amount of CSS) to be written, simple demo: https://jsfiddle.net/davidThomas/m3q6csmj/ — David Thomas, Mar 21 '17 at 17:09
@DavidThomas you can simplify your order styles : https://jsfiddle.net/he56zuzq/ — vals, Mar 21 '17 at 18:21

score 2 · Answer 1 · answered Mar 21 '17 at 16:57

if you can change your HTML markup, you can achieve that by using adjacent sibling selectors +

input:checked+div {
  color: pink;
}

<input type="radio" name="items" checked />
<div>item 1</div>
<input type="radio" name="items" />
<div>item 2</div>
<input type="radio" name="items" />
<div>item 3</div>

score 2 · Answer 2 · edited May 23 '17 at 12:25

Similar to how you can't use backreferences in attribute selectors, it is not possible to have the argument of one functional pseudo-class reference the argument of another functional pseudo-class.

What :nth-of-type(n) actually means is "any n". In other words, it's a guaranteed match on any element with a parent element. It's like *, but with pseudo-class specificity (and not on the root element, but that's really splitting hairs).

Which means

input[type=radio]:nth-of-type(n):checked ~ .item-list div:nth-of-type(n)

is equivalent to (plus the additional specificity of two pseudo-classes)

input[type=radio]:checked ~ .item-list div

Being able to adapt your markup as shown by dippas will make your life much easier, but if you absolutely have to work with the markup that you have, then you will indeed have to hardcode each number.

Obligatory note about preprocessors, taken from the link above:

A stylesheet preprocessor such as Sass or LESS will allow you to generate the static CSS rules needed, but all that does is automate the manual task of listing all possible values individually, which proves my first point.

Thanks for the clarity on `n`. I've been thinking about it a little wrongly. The work I'm doing is purely academic for my own interest, so no great loss if it doesn't work that way — aaron-bond, Mar 21 '17 at 17:13

Using nth-of-type dynamically

2 Answers2