dataprismcore5.cfd

Best

Written by

pw

in

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

This title appears to be a utility-class combination commonly used in modern CSS frameworks (like Tailwind CSS) to control list layout and spacing. Below is a concise explanation of what each part does, how they combine, and practical examples with use cases.

What each class means

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

  • list-inside — Places list markers (numbers or bullets) inside the content flow, so they align with the first line of the list item instead of hanging in the left margin.
  • list-decimal — Uses decimal numbers (1., 2., 3., …) as list markers (an ordered list).
  • whitespace-normal — Collapses whitespace normally and wraps text as needed; prevents unusual whitespace behavior.
  • [li&]:pl-6 — A bracket-variant that targets list item elements (li) and applies left padding (pl-6) to them. The precise selector syntax (li&) indicates a scoped or complex selector so the padding applies to each li within the component, adding indentation.

Combined effect

When used together on an ordered list container, these classes produce a numbered list where:

  • Numbers are inside the content box and aligned with the first text line.
  • Items are numbered with decimals.
  • Text wraps naturally.
  • Each list item receives consistent left padding (pl-6), increasing indentation for readability.

Example HTML (Tailwind-style)

html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>First item with normal wrapping and internal marker alignment.</li>  <li>Second item — if this text is long, it will wrap and align neatly beneath the first line.</li>  <li>Third item with the same padded indentation applied to the list item.</li></ol>

When to use

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

  • Documentation pages where numbered steps must align with wrapped text.
  • UI components that require consistent indentation across list items.
  • Mobile layouts where internal markers prevent overflow issues with narrow viewports.

Accessibility note

Ensure sufficient contrast between list markers and background, and use semantic

    /

  1. elements so assistive technologies announce numbering correctly.

If you want variants (e.g., hanging markers, different marker styles, or responsive padding), tell me which direction and I’ll provide examples._

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

More posts