list-inside list-decimal whitespace-normal [li&]:pl-6
Этот заголовок выглядит как класс CSS/utility-классов (часто используемых в Tailwind CSS) — он сочетает свойства для списков, нумерации, управления пробелами и нестандартного селектора для элементов списка. Ниже — практическое объяснение, когда и зачем применять такие комбинации, и пример реализации.
Что означают части заголовка
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — нумерация списка располагается внутри блока списка (номер становится частью строки элемента).
- list-decimal — нумерация в виде десятичных чисел (1., 2., 3.).
- whitespace-normal — регулировка переноса и пробелов: последовательность пробелов схлопывается, строки переносятся по обычным правилам.
- [li&]:pl-6 — нестандартный (arbitrary selector) класс, который в Tailwind-подобных системах означает применение padding-left: 1.5rem (pl-6) к элементам li, но с селектором, который модифицирует вложенные li через специфичный паттерн (например, li& интерпретируется как селектор, нацеленный на элемент li в контексте текущего компонента). Такой приём используют для изменения отступов конкретных дочерних элементов, не затрагивая все списки глобально.
Когда это полезно
- Верстка материалов с нумерованными пунктами, где нужно, чтобы номера не выходили за левую границу контейнера.
- Списки в тонкой типографике: когда требуется сохранить обычный перенос строк и компактные пробелы.
- Когда нужно целенаправленно добавить отступ только к элементам li внутри конкретного компонента, не меняя внешние стили.
Практический пример (HTML + Tailwind-подобная система)
Предположим, у нас есть компонент с классами из заголовка. Разметка и результаты:
HTML:
Первый пункт с длинным текстом, который может переноситься на несколько строк и должен красиво выравниваться под номером. Второй пункт с дополнительной информацией. Третий пункт — ещё один пример. Что произойдёт:
- Номера 1., 2., 3. будут показаны внутри блока каждого li.
- Текст будет переноситься нормально, без сохранения лишних пробелов
- У каждого li добавится левый внутренний отступ (pl-6), смещающий содержимое от номера и улучшая читаемость.
Подводные камни и советы
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside может сделать номера частью строки, из-за чего длинные номера (например, 10.) занимают место в тексте — проверьте выравнивание при многострочных пунктах.
- Arbitrary selector ([li&]:pl-6) поддерживается не во всех сборщиках/конфигурациях Tailwind; убедитесь, что ваша среда его интерпретирует, или используйте более стандартные селекторы через @layer utilities или дополнительный CSS:
.my-list li { padding-left: 1.5rem; }- &]:pl-6” data-streamdown=“unordered-list”>
- Для совместимости с доступностью проверяйте, что контраст и размеры шрифта остаются комфортными при добавлении отступов.
Заключение
Комбинация list-inside list-decimal whitespace-normal [li&]:pl-6 — это мощный паттерн для аккуратной верстки нумерованных списков: номера внутри, нормальный перенос текста и на
Leave a Reply