Chris Bolson Comments - Answer Overflow

In my opinion :has() is the single best thing to be added to CSS since custom properties. You can keep your nesting and container queries - :has() has just opened up a complete new range of possibilities.

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

What do you expect group-hover to do?

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

a quick check in the Tailwind site and I see that it does support has- since version 3.4: https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.0

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

To be honest I don't know. As the :has() selector is relatively new, I don't know when Tailwind added the "has-" syntax. If it doesn't work in that particular version you can always use it within the square-brackets to have the same effect: [&:has(.content:hover)]:text-primary Bear in mind that, as I say, :has() is relatively new and some browsers may still not support it, even if Tailwind does.

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

In Tailwind you can basically put any "normal" CSS within the square brackets. Just remember to user an underscore "_" for spaces. I use this square-bracket method a lot when using Tailwind to avoid repeating the same code on multiple children. I just place it once on the parent and keep the children Tailwind free 😆 I know that when using components this isn't so much of an issue but I still prefer it.

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

yes, that should work

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Something like this:

<section class="h-screen has-[:hover]:text-primary">
  <p>Some dummy content</p>
</section>

<section class="h-screen has-[:hover]:text-primary">
  <p>Some dummy content</p>
</section>

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

group-hover is for changing a child element when the parent "group" gets the hover. So, your code would change the text of the <p> (ie the child element) when you hover on the <section>. If you want the parent (eg your <section>) to change when you hover on a child (your <p>) you need to use :has()

50 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Yes, as b1mind has already linked, you can use :has(). In Tailwind this can be achieved like this: has-[:hover]:bg-green-300 If you need it only when hovering on a specific element you can define the specific selector: has-[&>p:hover]:bg-green-300

50 replies

KPCKevin Powell - Community

•Created by angell1389 on 7/2/2024 in #front-end

When switching from one div to another the elements are jumpy why?

You are adding a 2px border on hover. With the div, there is no default border so the DOM has to "adjust" to make room for the border that you add on hover - this is what causes the jumping. Buttons, however, by default, do have a border so in this case it is just changing the color so you don't get the jumping. If you add a 2px transparent border to your div you should see that the there is no "jumping" when you add the hover effect.

6 replies

KPCKevin Powell - Community

•Created by bonaventure on 7/2/2024 in #front-end

i have a container that contains 6 items and i want 3 items of the exact same size in each row

If your brief was for "multiple elements of varying widths on numerous columns", I would suggest using flex.

26 replies

KPCKevin Powell - Community

•Created by bonaventure on 7/2/2024 in #front-end

i have a container that contains 6 items and i want 3 items of the exact same size in each row

They look the same because I have coded them both to full-fill your requirements. The difference is that for the flexbox method you have to "force" the sizes of the boxes whereas with grid this is defined by the parent. However this isn't really the idea behind flexbox, the flex elements should, by definition, be allowed to "flex". I am not saying that grid is better than flexbox. They both have their uses which often overlap. However, in your use case, I feel that grid is the correct method as what you need it is exactly what it is designed for.

26 replies

Gaming

Programming