css selector :nth-child(n) , :nth-child(2n), :nth-child(2n+1), :nth-child(3n+1)

 The nth-child pseudo-class in CSS selects elements based on their position in a parent element's child list. The selector you mentioned, :nth-child(3n+1), selects every third child starting from the first one.

First we will see some basic examples




:nth-child(3n+1)

• 2n: Represents multiples of 2 (e.g., 0, 2, 4, 6, ...).
• +1: Adds 1 to each multiple, making the sequence start from 1 and select every third element (e.g., 1, 3, 5, 7, ...).

:nth-child(3n+1)

• 3n: Represents multiples of 3 (e.g., 0, 3, 6, 9, ...).
• +1: Adds 1 to each multiple, making the sequence start from 1 and select every third element (e.g., 1, 4, 7, 10, ...).