fluxstoragehub1.sbs

Splitter/Joiner

Written by

pw

in

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 placing li before the current element selector, so the rule becomes li:pl-6 scoped 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

Comments

Leave a Reply

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

More posts