You’re asking about the selector-like string py-1 [&>p]:inline. This is a utility class pattern used by Tailwind CSS (or similar utility-first CSS frameworks) combining a spacing utility with a nested/variant group for targeting child elements. Breakdown:
- py-1 — applies padding-top and padding-bottom of 0.25rem (Tailwind default spacing scale) to the element.
- [&>p]:inline — a variant using the arbitrary selector feature:
- & represents the current element.
- >p targets direct child
elements.
- :inline applies the
display: inline;utility to those matched children.
Combined effect: the element gets vertical padding of 0.25rem, and any direct
children are set to display:inline.
Notes:
- Requires Tailwind v3+ arbitrary variants support and that your build allows arbitrary selectors.
- Equivalent CSS:
.your-class { padding-top: 0.25rem; padding-bottom: 0.25rem; }.your-class > p { display: inline; } - If you need to target nested paragraphs at any depth use
[&_*p]:inlineisn’t valid — use[&_p]:inlineis incorrect; instead use something like[&_p]:inlineis not standard. For descendant use[&_p]isn’t supported; use a custom CSS rule or PostCSS plugin.
Leave a Reply