Styling even and odd repeats

  • Hi,

    I have a large amount of inputs tucked within the repeater field. I would like to style even blocks differently than odd blocks. Im pretty decent at CSS, but I can’t think of a very good way to do this.

    Actually I JUST came up with this (there’s 7 input in the repeater):

    [data-repeater-childid="1"]:nth-of-type(even),
[data-repeater-childid="2"]:nth-of-type(even),
[data-repeater-childid="3"]:nth-of-type(even),
[data-repeater-childid="4"]:nth-of-type(even),
[data-repeater-childid="5"]:nth-of-type(even),
[data-repeater-childid="6"]:nth-of-type(even),
[data-repeater-childid="7"]:nth-of-type(even) {
  background: red;
}

    Any ideas on a better solution?

    • This topic was modified 7 years, 3 months ago by Stegosource.
    • This topic was modified 7 years, 3 months ago by Stegosource.
Viewing 1 replies (of 1 total)
  • Thread Starter Stegosource

    (@stegosource)

    Here is the code that works, but is still tied to the number of inputs. Maybe someone knows a better solution…

    .client-referral [data-repeater-childid="1"]:nth-of-type(even),
.client-referral [data-repeater-childid="2"]:nth-of-type(odd),
.client-referral [data-repeater-childid="3"]:nth-of-type(even),
.client-referral [data-repeater-childid="4"]:nth-of-type(odd),
.client-referral [data-repeater-childid="5"]:nth-of-type(even),
.client-referral [data-repeater-childid="6"]:nth-of-type(odd),
.client-referral [data-repeater-childid="7"]:nth-of-type(even) {
	background: red;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Styling even and odd repeats’ is closed to new replies.