The selector py-1 [&>p]:inline looks like a utility-style (Tailwind-like) class combined with a bracketed arbitrary selector. Interpreting it:
- py-1 — apply vertical padding: padding-top and padding-bottom set to the spacing unit “1” (in Tailwind that’s 0.25rem by default).
- [&>p]:inline — an arbitrary variant that targets direct child
elements and applies the inline display to them. The [&>p] portion means “for the selector that is the current element followed by > p” (i.e., current-element > p); the :inline is the utility to apply (display: inline).
Resulting CSS (conceptual):
.current {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.current > p {
display: inline;
}
Notes:
- Exact spacing value for py-1 depends on your utility framework/config.
Leave a Reply