unordered-list

You’re asking about the CSS selector syntax py-1 [&>p]:inline.

This is a Tailwind CSS/JIT-style utility pattern combining a spacing utility with a bracketed arbitrary variant that targets direct child

elements.

Breakdown:

• py-1 — applies vertical padding (padding-top and padding-bottom) of the scale value 1.
• [&>p]:inline — an arbitrary selector variant. It applies the utility that follows (here: inline) to elements matching the selector & > p, where & represents the element the class is on. So it sets display: inline on direct child

  elements.

Behavior example (in plain CSS):

• On an element with class py-1 [&>p]:inline:
  • The element gets vertical padding from py-1.
  • Any direct child

    (immediate children) gets display: inline.

Notes:

• Requires Tailwind JIT or a build setup that supports arbitrary variants.
• The selector targets only immediate children (>). Use [& p]:inline to target all descendant

  elements.

• .your-class { padding-top: …; padding-bottom: … } and a second rule .your-class > p { display: inline } (selector adapted for generated class name).