3 ms·
I believe it's regular old css. The :has() pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/:has https://developer.mozilla.org/en-US/docs/Web/CSS
by lemonberry 1y ago
I believe it's regular old css. The :has() pseudo class.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has https://developer.mozilla.org/en-US/docs/Web/CSS/:has
- reactordev 1y agoNice
- MrJohz 1y agoIt's not even :has, it's just how child selectors in CSS have always worked. // Not actually needed, here // for competition .group {} // Child selector .group:hover group\/hover\:bg-black { background-color: black; } // Which is essentially the same as .group:hover child { background-color: black; }
- luckylion 1y agoThat doesn't affect the parent (.group) based on the child though.
- omnimus 1y agoAtleast in Tailwind that’s what it should do. You hover over card (.group) and some elements inside change.
- MrJohz 1y agoNo, but `group` doesn't affect the parent in Tailwind. You put `group` in the parent to mark it, and then use the `group/...` syntax to apply different properties to the child, depending on the different states of the parent. This doesn't require `:has`. I don't think Tailwind has a built-in `:has` tool, but I suspect it would be easy to add one as a custom class.
- luckylion 1y agoOh, I misunderstood the GP then, thanks for clarifying!
- omnimus 1y agoTailwind has few :has tools but it’s imho terrible. They keep inflating the system to nonsense.
- reactordev 1y agoThis.
- deleted 1y ago[deleted]
- omnimus 1y agoIsn’t it funny that in a thread about how Tailwind is bad and people should learn real css… people also think css selectors require JS?
- MrJohz 1y ago:has doesn't require JS, I think the previous poster was just confused about which selector `group` is equivalent to.
- owebmaster 1y agoWhich is a indication they might not know CSS that well.
- MrJohz 1y agoBased on other replies, I believe they understood CSS well enough, but didn't understand the exact behaviour of the `group` class in Tailwind. Given neither of your comments seem to have made much sense given the context of the discussion, I wonder if you're just looking for confirmation of things you already 'know'. EDIT: I'm sorry, I mixed you up with the other user who was replying criticising other people's CSS knowledge.
- reactordev 1y agoI’m sorry but :has is new. 2023. Forgive this grey beard that built the world you know.
- owebmaster 1y agoNo need to apologize, it just does not make sense to belittle other people's work when you lack the knowledge to judge it. Nobody told you it used JS for the effect, you conjured that up yourself.
- Rapzid 1y agoBaseline 2023 meaning all major browsers supported it in their latest versions sometime in 2023.. Like all new CSS stuff it's probably been a very long time coming. Everyone can't pay attention to everything though, regardless of their beard color.
- owebmaster 1y agois it possible to add the hover to the parent without also adding it to the child ?
- MrJohz 1y agoWhat do you mean? It's possible to apply attributes to any element in an arbitrary state: `hover:bg-black` would give an element a black background on hover. It's also apparently possible to apply attributes based on whether a state is fulfilled for a child element (i.e. the :has selector). E.g. `has-[:hover]:bg-black` would give an element a black background if any child is hovered.
- owebmaster 1y ago> What do you mean? the second part of your answer answered it perfectly. Thanks