Explanation of the selector py-1 [&>p]:inline
- py-1 — utility class (likely from a utility CSS framework like Tailwind) that applies vertical padding: padding-top and padding-bottom set to a small value (e.g., 0.25rem if using Tailwind’s default scale).
- [&>p]:inline — a JIT-style arbitrary variant (used in Tailwind CSS v3+ with the bracket/selector variant syntax). It targets direct child
elements of the element with this class and applies theinlinedisplay to them.
Combined behavior:
- Applied on an element, the element receives vertical padding from
py-1. - Any direct child
elements (> p) becomedisplay: inlinedue to the[&>p]:inlinevariant.
Equivalent plain CSS (assuming Tailwind defaults for spacing):
css
/element with classes */.element { padding-top: 0.25rem; padding-bottom: 0.25rem;}.element > p { display: inline;}
Notes:
- The exact spacing value for
py-1depends on the framework/config (Tailwind default: 0.25rem). - [&>p]:inline requires the framework to support arbitrary variants (Tailwind JIT). In plain HTML/CSS you’d just use the selector shown above.
Leave a Reply