list-inside list-decimal whitespace-normal [li&]:pl-
This article explains a CSS utility-style class name — “list-inside list-decimal whitespace-normal [li&]:pl-6” — showing what each part does, when to use it, and practical examples. It assumes a utility-first CSS system (like Tailwind CSS) where multiple utility classes are combined on an element.
What the combined classes mean
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Places the list marker (numbers) inside the content box so markers are part of the flow and respect padding.
- list-decimal: Uses decimal numbering (1., 2., 3.) for ordered lists.
- whitespace-normal: Allows normal whitespace handling: sequences of whitespace are collapsed, and lines wrap as needed.
- [li&]:pl-6: A variant applying left padding (pl-6) to each li element; the bracketed form targets nested selectors—here it means “for each li inside this element, apply pl-6”. In Tailwind-style arbitrary variants,
li&indicates the selector composed by placinglibefore the current element selector, so the rule becomesli:pl-6scoped to the component.
When to use this combination
Use this set when you want an ordered list that:
- Shows numbers inside the text block (not hanging outside),
- Uses standard numeric markers,
- Allows list items to wrap normally without preserving extra whitespace,
- Adds consistent left padding to each list item for improved alignment and readable indentation
This is useful for documentation, FAQs, step-by-step instructions, or any content-heavy lists where line-wrapping and consistent indentation matter.
CSS behavior details
- &]:pl-6” data-streamdown=“unordered-list”>
- With list-inside, long list items wrap under the marker rather than aligning under the text; combining it with pl-6 on li increases the space between marker and text so wrapped lines align neatly.
- list-decimal sets list-style-type to decimal; if you need Roman numerals or lower-alpha, swap this utility.
- whitespace-normal ensures text wraps naturally; omit or change it if you need to preserve newlines or prevent wrapping.
- The arbitrary variant [li&]:pl-6 keeps the padding rule scoped and avoids affecting other lists globally.
Example HTML (utility-first)
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Install the package using your package manager. If you’re behind a proxy, configure the proxy settings first.</li> <li>Import the module and initialize with recommended defaults. Adjust options for performance.</li> <li>Run the provided tests. Address any failing tests before proceeding to deployment.</li></ol>Accessibility tips
- Ensure sufficient contrast between text and background.
- Use semantic
- and
Leave a Reply