Bram Bram - 6 months ago 16
HTML Question

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

I have the 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. I want to grab every B-element with a css nth-child selector.
I tried nth-child:(4n + 3), but this didn't work out.
Should this be possible with pure css, or do I have to use javascript.

I assume that, if this is possible with css, I would have declare 4 css-selectors.

Thank you!

Answer

You can use li:nth-child(7n+4), li:nth-child(7n+5) ... where li:nth-child(7n+4) will match 4, 11, 18... and li:nth-child(7n+5) will 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>

Comments