You’re asking about the CSS selector/pattern py-1 [&>p]:inline. This is a utility-class pattern commonly used with Tailwind CSS (or Tailwind-style utilities) plus its JIT/variant syntax that targets child elements. Explanation:
- py-1
- Utility to set vertical padding (padding-top and padding-bottom) to the spacing scale value 1 (usually 0.25rem in Tailwind defaults).
- `[&>p]:inline
- A variant using the arbitrary selector feature with the ampersand
&representing the current element. - &>p means “direct child p elements of this element”.
- :inline applies the
display: inline;declaration to those matched child - Combined, this generates CSS similar to:
.your-class { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.your-class > p { display: inline; }
- A variant using the arbitrary selector feature with the ampersand
Notes:
- This requires Tailwind JIT/arbitrary variant support (Tailwind v3+).
- You can adapt the arbitrary selector for other relationships (descendant
& p, sibling& + p, etc.). - Be careful: setting block elements like
to inline can affect spacing and semantics.
If you want an exact example (HTML + Tailwind config) or alternatives, say which and I’ll provide it.
Leave a Reply