html - CSS nth-child: every 4th, 11th, 18th etc -

i have following div html-structure:

• a
• a
• a
• b
• b
• b
• b
• a
• a
• a
• b
• b
• b
• b

etc.

so, after 3 times a, comes 4 times b. want grab every b-element css nth-child selector. tried nth-child:(4n + 3), didn't work out. should possible pure css, or have use javascript.

i assume that, if possible css, have declare 4 css-selectors.

thank you!

you can use li:nth-child(7n+4), li:nth-child(7n+5) ... li:nth-child(7n+4) match 4, 11, 18... , li:nth-child(7n+5) match 5, 12, 19 etc.

li:nth-child(7n+4), li:nth-child(7n+5), li:nth-child(7n+6), li:nth-child(7n+7) {    font-weight: bold;  }

<ol><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li>  </ol>

you use li:nth-child(7n), li:nth-child(7n-1) ...

li:nth-child(7n), li:nth-child(7n-1), li:nth-child(7n-2), li:nth-child(7n-3) {    font-weight: bold;  }

<ol><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li><li>li</li>  </ol>