list-item

You’re looking at a CSS selector using a custom class (py-1) and a combinator with an attribute-like token [&>p]:inline — common in utility-first frameworks like Tailwind CSS (or Tailwind-inspired libraries such as UnoCSS). Here’s what it means and how it behaves.

What it selects

• .py-1 — an element with the class py-1 (typically sets vertical padding).
• [&>p]:inline — a variant that generates a selector applying a utility when that element has a direct child p (paragraph). Specifically, it means: “When this element has a direct child p, make that child display:inline.”

In plain CSS the generated selector would look like:

.py-1 > p { display: inline; }

Framework context

• Tailwind: This is Tailwind’s arbitrary variant syntax (the square-bracket variant). It lets you produce custom selectors not built into the core.
• UnoCSS and similar tools also support this pattern.
• The left side (class name) is the element you style; the bracketed part defines where the utility applies via an arbitrary CSS selector.

Use cases

• Convert direct paragraph children to inline without adding a separate class to the p.
• Fine-grained control for component wrappers where children need different display behavior.

Notes

• This targets only direct children (>). To target all descendant paragraphs you’d use [& p]:inline which compiles to .py-1 p { display:inline; }.
• Ensure your build tooling (Tailwind config) allows arbitrary variants; otherwise the syntax will be ignored or cause errors.
• The utility name (inline) sets display:inline. You can combine with other utilities similarly (e.g., [&>p]:text-sm).

If you want an exact Tailwind config example or compiled CSS output, tell me which tool (Tailwind or UnoCSS) you’re using.