The selector you wrote combines a utility class and a complex CSS selector: py-1 [&>p]:inline
- py-1 — likely a utility class (e.g., Tailwind/utility-style) that sets vertical padding (padding-top and padding-bottom) to a small size.
- [&>p]:inline — a group variant syntax (used by some utility-first frameworks like Tailwind with JIT/experimental features) that targets direct child
elements and applies the inline display utility to them.
Interpreted together (in Tailwind JIT-style syntax):
- Apply the py-1 padding to the element.
- For any direct child
of that element, apply the inline display (display: inline).
Equivalent plain CSS:
.element {
padding-top: / value for py-1 /;
padding-bottom: / value for py-1 /;
}
.element > p {
display: inline;
}
Notes:
- Exact padding value depends on the utility framework configuration (Tailwind’s py-1 is usually 0.25rem by default).
Leave a Reply