Пропустить первые несколько элементов в ul

Пытаюсь установить разделитель, но хочу пропустить первые несколько элементов в моем ul. Не могу заставить его работать.

<ul>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
</ul>

Мой CSS с попутным ветром

ul {
   @apply divide-y;
}

Я не могу пропустить первые три пункта. Для этих трех предметов мне НЕ нужен разделитель. Как сделать?

Перепробовал дюжину вариантов с этим кодом:

css

ul > li:not(:nth-child(-n + 3)) {
  @apply divide-y;
}

Привет @Boq7, ты пробовал tailwindcss.com/docs/…?

Sumit Surana 21.04.2023 11:15
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Класс divide-y всегда должен быть связан с родительским элементом. Цель класса — поместить border между дочерними элементами, которые отображаются как визуальный элемент divider.

Если вы не хотите видеть разделитель на первых трех элементах, просто отключите границу.

ul {
  @apply divide-y;
}
ul > li:nth-child(-n + 3) {
  @apply border-none;
}

Пример на codepen

Я попробовал это с divide-none, что не сработало, но не подумал о border-none. Это сработало отлично, большое спасибо.

Boq7 21.04.2023 12:17

Другие вопросы по теме