list-inside list-decimal whitespace-normal [li_&]:pl-6

list-inside list-decimal whitespace-normal [li&]:pl-6

This article explains a CSS utility class combination—likely from a utility-first framework (e.g., Tailwind CSS)—that configures list appearance and spacing: list-inside list-decimal whitespace-normal [li&]:pl-6. Below is a concise breakdown, use cases, and an example implementation.

What it does

• list-inside — Positions list markers (numbers) inside the content flow so they align with list text rather than hanging in the margin.
• list-decimal — Uses decimal numbers (1., 2., 3.) as list markers.
• whitespace-normal — Allows normal wrapping and collapsing of whitespace; long lines will wrap at word boundaries.
• [li&]:pl-6 — A bracketed arbitrary variant that applies pl-6 (left padding) to each li element while preserving the marker placement; the exact selector structure (li&) indicates an advanced variant targeting the list-item in relation to the parent—use depends on framework version and configuration.

When to use this combination

• You want numbered lists whose markers sit inside the text block and wrap naturally.
• You need extra left padding on list items to align multiline list content cleanly while keeping markers inside.
• You prefer utility classes over custom CSS for consistency and rapid development.

Example (Tailwind-style HTML)

<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item.</li>  <li>Long item that wraps onto a second line to demonstrate how the padding keeps wrapped lines aligned under the text rather than under the marker.</li>  <li>Another item with normal whitespace handling.</li></ol>

.custom-list li { padding-left: 1.5rem; }