unordered-list

py-1 [&>p]:inline — What it means and how to use it

This selector/utility pattern combines a spacing utility (py-1) with a Tailwind-style arbitrary selector ([&>p]:inline) to target direct child paragraphs and make them inline while applying vertical padding. It’s commonly used in utility-first CSS to scope styles to specific child elements without writing extra CSS classes.

Breakdown

• py-1
  Applies vertical padding (padding-top and padding-bottom). In Tailwind CSS this corresponds to a small vertical gap (usually 0.25rem by default).

• [&>p]:inline
  An arbitrary selector that targets direct child

  elements and sets their display to inline. The & represents the current element; >p matches immediate paragraph children; :inline is the utility form that applies display: inline.

Why use this pattern

• Scoped child styling: Modify only immediate paragraph children without adding additional classes or writing separate CSS.
• Utility composition: Keep markup concise using utility classes rather than creating custom CSS.
• Predictable cascade: Since the selector targets direct children, it avoids unintended effects on nested paragraphs.

Example usage

<div class=“py-1 [&>p]:inline”><p>First part</p>  <p>Second part</p>  <div>    <p>This paragraph is nested and will not become inline.</p>  </div></div>

In this example the two direct

children render inline (flowing on the same line if space permits) while the nested paragraph remains unaffected.

Tips and considerations

• Inline paragraphs lose block features like vertical margin and full-width layout; ensure this suits your design.
• Use with spacing utilities (e.g., gap, space-x) or wrap inline paragraphs in containers when you need controlled separation.
• Ensure browser compatibility for your utility framework; arbitrary selectors require a build step that supports them (e.g., Tailwind v3+).
• For multiple child selectors, combine safely: [&>p]:inline [&>span]:block etc.

Quick reference

• Effect: Adds vertical padding to parent; makes direct child

  elements display inline.

• Use when: You want inline flow for immediate paragraphs without affecting nested content.