CSS nth-child ignores the first 3 elements, stylizes the remaining 3 and repeats. Possible?

I know that nth-child is for every nth element, but you can probably ignore the first 3 elements, stylize the remaining 3 and repeat for a huge list. I tried to write that each 4n + 1,5n + 1 and 6n + 1 will change, but this also includes 8, 15, etc., which I don’t want to style. All my attempts of the nth child were fruitless.

+1
source share
2 answers

http://jsfiddle.net/bhlaird/7c3aw/ If you want your template to repeat every 6 elements (3 on, 3 off), Use 6n.

div:nth-child(6n+4), div:nth-child(6n+5), div:nth-child(6n+6) { background-color:#0066cc; } 
+2
source

You can use:

 :nth-child(6n+4), :nth-child(6n+5), :nth-child(6n+6) { CSS RULES } 

For example: http://jsfiddle.net/BYossarian/3HwU9/2/

The multiplier for n will be the length of your repeating pattern (in this case 6, because you have 3 and then 3 on), and then you add / subtract a number to select the correct elements inside the pattern (in this case, 4th, 5 6th and 6th elements of the template).

+2
source

Source: https://habr.com/ru/post/955066/


All Articles