Для выбора элементов 1, 4, 6, 9, 11 и 14 с помощью селектора :nth-child(), можно использовать следующее выражение:
:nth-child(3n-2), :nth-child(3n-1), :nth-child(3n)
Здесь 3n-2, 3n-1 и 3n определяют шаблон, который будет соответствовать ожидаемым элементам. Итак, в приведенном примере первый шаблон (3n-2) будет соответствовать числам 1, 4, 7 и т.д., второй шаблон (3n-1) соответствует числам 2, 5, 8 и т.д., и третий шаблон (3n) соответствует числам 3, 6, 9 и т.д.
Точно так же можно выбрать элементы 2, 5, 7, 10, 12 и 15, используя селектор :nth-child() с другими параметрами:
:nth-child(3n-1), :nth-child(3n), :nth-child(3n+1)
Здесь шаблоны 3n-1, 3n и 3n+1 опять же выбирают ожидаемые элементы. В данном случае первый шаблон (3n-1) будет соответствовать числам 2, 5, 8 и т.д., второй шаблон (3n) соответствует числам 3, 6, 9 и т.д., и третий шаблон (3n+1) соответствует числам 4, 7, 10 и т.д.
Примеры использования данных селекторов в CSS-коде:
/* Выбираем элементы 1, 4, 6, 9, 11 и 14 */
:nth-child(3n-2), :nth-child(3n-1), :nth-child(3n) {
/* Ваш стиль для выбранных элементов */
}
/* Выбираем элементы 2, 5, 7, 10, 12 и 15 */
:nth-child(3n-1), :nth-child(3n), :nth-child(3n+1) {
/* Ваш стиль для выбранных элементов */
}
Использование :nth-child() позволяет эффективно выбирать определенные элементы в зависимости от их порядкового номера в родительском контейнере.