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-topandpadding-bottomof 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
inlinedisplay 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]:inlineis 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>).
Leave a Reply