Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do :nth-of-type(n) "n" counters increment independently with others in the same CSS rule?

Tags:

css

css3pie

Do the n counters increment independently of each other in :nth-of-type() CSS selectors? For example, if I wanted label:checked:nth-of-type(3) to match its general sibling article:nth-of-type(3), should this technique work? (It doesn't, but maybe I just want to be sure.)

label:checked:nth-of-type(n) ~ article:nth-of-type(n)

The idea is not to have to explicitly say :nth-of-type(1), :nth-of-type(2), and so on.

like image 813
chimerical Avatar asked Dec 06 '11 06:12

chimerical


1 Answers

Unfortunately for you, the n counter is local to the nth-of-type where it is defined, so your technique won't work. You would have to do something like this:

label:checked:nth-of-type(1) ~ article:nth-of-type(1),
label:checked:nth-of-type(2) ~ article:nth-of-type(2),
label:checked:nth-of-type(3) ~ article:nth-of-type(3),
label:checked:nth-of-type(4) ~ article:nth-of-type(4),
label:checked:nth-of-type(5) ~ article:nth-of-type(5), ...
{
    /* definitions */
}

...which is a pain. I see where you are going with it, and it would be great to be able to use something like that!

like image 170
Anders Marzi Tornblad Avatar answered Oct 27 '22 15:10

Anders Marzi Tornblad



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!