list-inside list-decimal whitespace-normal [li&]:pl-6
What the utility class string means
This title reads like a combination of CSS utility classes commonly used with utility-first frameworks (for example, Tailwind CSS). Breaking it down:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — positions list-item markers (bullets or numbers) inside the content flow rather than hanging outside.
- list-decimal — uses decimal numbering for ordered lists (1, 2, 3…).
- whitespace-normal — collapses whitespace and wraps text normally (default whitespace handling).
- [li&]:pl-6 — a bracketed arbitrary selector variant that applies padding-left: 1.5rem (pl-6) to li elements that match a custom selector pattern (here represented as li&). This pattern suggests using a variant that targets a transformed selector where the current selector (&) is combined with a prefix like li. In practice, frameworks that support arbitrary variants let you write selectors for nested or complex targets.
When you’d use this combination
Use these utilities when you need an ordered list where:
- &]:pl-6” data-streamdown=“unordered-list”>
- numbers sit inside the list block,
- items wrap naturally,
- each list item is indented with consistent left padding equal to Tailwind’s pl-6 (1.5rem),
- and you rely on an arbitrary-variant selector to target li elements in a specific context (for example, when generating styles for namespaced or scoped markup).
Practical scenarios:
- Documentation pages where numbered steps must align with wrapped text.
- Nested components where you need extra left spacing for list items without changing outer container padding.
- Styling lists in a scoped CSS module or BEM-like structure that requires a custom selector.
HTML example
html
<ol class=“list-inside list-decimal whitespace-normal”><li class=”[li&]:pl-6”>Install the package and add it to your project configuration.</li> <li class=”[li&]:pl-6”>Create the component and apply the utility classes as shown.</li> <li class=”[li&]:pl-6”>Test the layout with long lines to confirm wrapping and indentation.</li></ol>Notes on support and alternatives
- &]:pl-6” data-streamdown=“unordered-list”>
- Not all utility frameworks support arbitrary variant selectors like [li&]:pl-6; Tailwind supports arbitrary variants but the exact syntax and selector transformation depend on the framework version and plugin support.
- If arbitrary variants aren’t available, apply a class to li elements directly (e.g.,
- ) or use a parent selector combined with a small custom stylesheet:
css
.custom-list li { padding-left: 1.5rem; }Best practices
- &]:pl-6” data-streamdown=“unordered-list”>
- Test across responsive breakpoints to ensure numbering and padding remain readable.
- Keep accessibility in mind: use semantic ol/ul elements and ensure sufficient contrast and spacing for readability.
- Prefer explicit classes on li if you don’t need complex selector transformations—it’s simpler and more maintainable.
Summary
The compound utility string configures an ordered list with internal numbering, normal whitespace wrapping, and left padding applied to list items via an arbitrary-variant selector. Use it when you need precise control over list markers, wrapping behavior, and item indentation in utility-first CSS setups._
Leave a Reply