Pro

You’re referencing a CSS rule combining a class-like token and an attribute selector: py-1 [&>p]:inline.

Explanation:

  • py-1 is a utility (likely from a utility-first framework like Tailwind CSS) that applies vertical padding: padding-top and padding-bottom of a small size (in Tailwind v3 default spacing, py-1 = 0.25rem).
  • [&>p]:inline uses a variant selector (Tailwind’s arbitrary selector / JIT feature) that targets direct child

    elements and applies the inline display to them. Expanded: it compiles to a rule matching .your-class > p { display: inline; } when applied via the parent.

Put together on an element:

  • The element gets vertical padding of 0.25rem.
  • Any direct child

    elements become display: inline.

Notes:

  • Syntax like [&>p]:inline is Tailwind’s arbitrary selector variant; it requires JIT/just-in-time mode or v3+ and that the selector is permitted by your config.
  • Ensure proper escaping in HTML/class attributes if your tooling treats [ or ] specially.
  • If you want to target all descendant

    (not just direct children), use [& p]:inline (space instead of >).

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