You’re showing a CSS selector shorthand: py-1 [&>p]:inline. This looks like Tailwind CSS (or a Tailwind-like utility framework) using JIT arbitrary variants. Explanation:
- py-1 — applies padding-top and padding-bottom: 0.25rem (Tailwind’s scale; 1 = 0.25rem).
- [&>p]:inline — an arbitrary variant targeting direct child
elements: it applies the
inlinedisplay utility to any immediate child p (selector expands to& > p { display: inline; }). - Combined effect — the element gets vertical padding of 0.25rem, and any direct child
becomes display: inline.
Notes:
- Requires a Tailwind JIT build that supports arbitrary variants (Tailwind v3+).
- The exact spacing value depends on your Tailwind config if customized.
- If you want to target all descendant p elements (not just direct children), use
[&p]:inlineor[&>p]:inlinevs[&]depends on your conventions — for descendants use[&_]? (Tailwind recommends[&*]isn’t standard; use[&*]only if configured). Safer explicit selector:[&>p]:inlinefor direct children;[&:where(:scope p)]:inlineis not common. - In plain CSS equivalent:
selector { padding-top: .25rem; padding-bottom: .25rem; }
selector > p { display: inline; }
If you want exact code or alternatives (descendant selector, targeting first-child, responsive variants), tell me which.
Leave a Reply