list-inside list-decimal whitespace-normal [li&]:pl-6
This article explains the CSS utility class string list-inside list-decimal whitespace-normal [li&]:pl-6, what it does, when to use it, and examples showing how it affects HTML lists. This pattern appears in utility-first CSS frameworks (like Tailwind CSS) where multiple utilities are combined to style elements concisely.
What each utility does
- list-inside — Places list markers (numbers or bullets) inside the content flow. Markers are rendered inside the list item’s content box rather than hanging outside.
- list-decimal — Uses decimal numbering (1., 2., 3., …) for ordered lists.
- whitespace-normal — Collapses sequences of white space and allows wrapping at normal word boundaries; prevents preserving line breaks or extra spaces.
- [li&]:pl-6 — A bracketed arbitrary selector utility that targets the list item elements (li) and applies
padding-left: 1.5rem(assumingpl-6maps to 1.5rem) to them. The selector syntax[li&]means “select li when it is the current root of this utility” — frameworks vary, but the intent is to apply padding-left to each li.
When to use this combination
Use these utilities when you want a numbered list with markers inside the content area, normal whitespace handling, and additional left padding on each list item to create visual separation between the marker and the text. This is useful for readable, compact lists in UI components like documentation, FAQs, or settings panels.
HTML example
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>First item with wrapped text that will flow normally across lines.</li> <li>Second item with extra padding for clear alignment.</li> <li>Third item demonstrating the inside decimal marker placement.</li></ol>Visual effect summary
- &]:pl-6” data-streamdown=“unordered-list”>
- Numbers appear inside the list item’s box, aligned with the padded content.
- Long lines wrap naturally without preserving extra spaces or line breaks.
- Each list item gains consistent left padding, improving legibility and marker separation.
Notes and caveats
- The exact behavior of
[li&]:pl-6depends on the CSS framework version and configuration; some frameworks use slightly different arbitrary selector syntax. - Test across browsers for consistency, especially with complex nested lists or custom counter styles.
- marker-* utilities (if available) to fine-tune marker positioning.
Leave a Reply