Squiller Squiller - 3 months ago 14
CSS Question

Alternate between two different colors every 3 elements with only 1 selector

I have a list of

tr
elements and I want to add CSS on them with the following pattern :


  • red

  • red

  • red

  • black

  • black

  • black

  • red

  • red

  • red

  • black



etc.

How can I do this ? for now I've been using :

tr:nth-child(6n+1) { color: red; }
tr:nth-child(6n+2) { color: red; }
tr:nth-child(6n+3) { color: red; }


... but how can I do it with only 1 selector ?




EDIT : Here is a jsfiddle link https://jsfiddle.net/1s5s05vk/2/

Answer

What you want to do cannot be done with a single selector using CSS alone.

However, you can shorten the definition so you don't repeat code:

tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
    color: red;
}