fluxstoragehub5.sbs

GraceAmp

Written by

pw

in

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

What this class combination does

This title references a set of utility classes commonly found in modern CSS utility frameworks (for example, Tailwind CSS). Together they control list-style positioning, marker format, whitespace handling, and a custom per-list-item left padding selector.

    &]:pl-6” data-streamdown=“unordered-list”>

  • list-inside: Places the list marker (decimal, disc, etc.) inside the content box so the marker flows with the text and wraps with it.
  • list-decimal: Uses decimal numbers (1., 2., 3., …) as list markers.
  • whitespace-normal: Applies normal whitespace handling: sequences of whitespace collapse, and lines break as needed.
  • [li&]:pl-6: A bracketed selector-style utility that targets list items (li) using a tokenized selector and applies left padding (pl-6). The syntax suggests a framework that supports arbitrary selectors (the [selector]:utility pattern), where li& likely composes the selector so the utility applies to each li within the container.

When to use this combination

Use these utilities when you want a numbered list whose markers stay with wrapped lines, with standard whitespace collapsing and extra left padding on each list item to create visual separation from the surrounding content. This is useful for:

  • Documentation and technical guides where wrapped list items should align clearly with their own markers.
  • Nested lists where you want precise control over marker placement and item indentation.
  • Responsive layouts where marker behavior must match text wrapping across breakpoints.

Example HTML and expected behavior

HTML:

html
<ul class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item.</li>  <li>A much longer item that will wrap onto multiple lines to demonstrate that the numeric marker stays inside the content flow and wraps with the text.</li>  <li>Another item with normal whitespace handling.</li></ul>

Expected visual result:

    &]:pl-6” data-streamdown=“unordered-list”>

  • The list shows “1.”, “2.”, “3.” markers.
  • Markers appear inside the content box; if the text wraps, the marker remains attached to the first line.
  • Each li has left padding equivalent to the framework’s pl-6 (commonly 1.5rem), shifting the content and marker inward.
  • Whitespace is collapsed and lines break naturally.

Notes and compatibility

  • Framework support: The [li&]:pl-6 arbitrary selector pattern is supported in Tailwind CSS v3+ with the JIT engine, or in similar utility-first frameworks that allow arbitrary variants. Syntax may vary; some tools use li:pl-6 or require escaping special characters.
  • Accessibility: Ensure adequate contrast and sufficient spacing for readability. Numeric markers are semantic; prefer ordered lists (
      &]:pl-6” data-streamdown=“ordered-list”>) for

Quick checklist

  • Use an ordered list element (
      ) for semantic numbering when sequence

Your email address will not be published. Required fields are marked *

More posts