Как найти элементы 1, 4, 6, 9, 11, 14 с помощью :nth-child(), ещё также 2, 5,7, 10, 12, 15?

Ссылка скопирована
1 ответ

Как найти элементы 1, 4, 6, 9, 11, 14 с помощью :nth-child(), ещё также 2, 5,7, 10, 12, 15?

Дополнительно:

каждый пятый элемент с разным смещением.

Как найти элементы 1, 4, 6, 9, 11, 14

:nth-child(5n + 1), :nth-child(5n + 4) { }

:nth-child(5n + 1), :nth-child(5n + 4) { }

2, 5,7, 10, 12, 15

:nth-child(5n + 2), :nth-child(5n) { }

:nth-child(5n + 2), :nth-child(5n) { }

snippet

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Юрий Linux Ответ

Для того чтобы выбрать элементы 1, 4, 6, 9, 11, 14 с помощью :nth-child() в CSS, можно использовать следующие селекторы:

.element:nth-child(3n-2), /* выбирает элементы 1, 4, 7, 10, 13 и т.д. */
.element:nth-child(3n), /* выбирает элементы 3, 6, 9, 12, 15 и т.д. */
.element:nth-child(3n+1) /* выбирает элементы 1, 4, 7, 10, 13 и т.д. */

.element:nth-child(3n-2), /* выбирает элементы 1, 4, 7, 10, 13 и т.д. */ .element:nth-child(3n), /* выбирает элементы 3, 6, 9, 12, 15 и т.д. */ .element:nth-child(3n+1) /* выбирает элементы 1, 4, 7, 10, 13 и т.д. */

Аналогично, чтобы выбрать элементы 2, 5, 7, 10, 12, 15, можно использовать следующие селекторы:

.element:nth-child(3n-1), /* выбирает элементы 2, 5, 8, 11, 14 и т.д. */
.element:nth-child(3n+2), /* выбирает элементы 2, 5, 8, 11, 14 и т.д. */
.element:nth-child(3n+2) /* выбирает элементы 2, 5, 8, 11, 14 и т.д. */

.element:nth-child(3n-1), /* выбирает элементы 2, 5, 8, 11, 14 и т.д. */ .element:nth-child(3n+2), /* выбирает элементы 2, 5, 8, 11, 14 и т.д. */ .element:nth-child(3n+2) /* выбирает элементы 2, 5, 8, 11, 14 и т.д. */

Таким образом, вы можете использовать комбинацию различных параметров в функции :nth-child(), чтобы выбирать нужные элементы на странице. Не забывайте, что нумерация элементов начинается с 1.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно