dataprismcore3.cyou

of

Written by

pw

in

py-1 [&>p]:inline

What it is

py-1 [&>p]:inline is a CSS-like selector shorthand used in some utility-first CSS frameworks (notably Tailwind CSS and tools inspired by it) to apply a specific utility — here py-1 (padding-top and padding-bottom: 0.25rem) — to direct child paragraph elements (p) only, and to make those paragraphs display inline. The pattern breaks down as:

  • py-1 — set vertical padding to 0.25rem (framework-dependent scale).
  • [&>p] — target direct child p elements of the selected element.
  • :inline — apply the display: inline utility to those targeted p elements.

When to use it

Use this pattern when you want to style paragraph children of a container with small vertical padding and make them inline (so they flow inline with surrounding text), without affecting other descendant elements.

Equivalent CSS

css
.container > p {padding-top: 0.25rem;  padding-bottom: 0.25rem;  display: inline;}

Example HTML

html
<div class=“py-1 [&>p]:inline”>  <p>First inline paragraph.</p>  <p>Second inline paragraph.</p>  <span>Unchanged inline span.</span></div>

Notes and caveats

  • Syntax support depends on your CSS framework and its JIT/variant parser (for Tailwind, this requires JIT mode and enabling arbitrary variants).
  • Direct child combinator (>) means only immediate p children are affected — nested p elements inside other wrappers won’t receive the styles.
  • Applying display: inline to paragraphs removes block behavior (no automatic line breaks); ensure this matches your layout intent.

Comments

Leave a Reply

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

More posts