You’re referring to a CSS selector/utility pattern—likely Tailwind-style classes—combining list styling and a utility for padding. Here’s a concise explanation and example.
- list-inside: Places list markers (bullets/numbers) inside the content box so they align with the first line of list item text.
- list-decimal: Uses decimal numbering for ordered lists (1, 2, 3…).
- whitespace-normal: Collapses whitespace and wraps text normally.
- [li&]:pl-6 — an arbitrary variant selector in Tailwind that targets list item elements (li) and applies padding-left: 1.5rem (pl-6) to them. The syntax [li&] means “when the parent is li, apply this” or more precisely it injects li as part of the selector so the pl-6 utility targets the li element in the generated CSS.
Example HTML using Tailwind:
html
<ol class=“list-inside list-decimal whitespace-normal”><li class=”[li&]:pl-6”>First item with normal wrapping and extra left padding</li> <li class=”[li&]:pl-6”>Second item</li></ol>If you want the numbering to remain outside while adding left padding to list items, use list-outside instead of list-inside.
Leave a Reply