Group Modifiers

[00:00:00]
>> So let's talk about group, which is similar to peer. The big difference is peer is siblings, group is descendants, right? And so lets you do an entire all, any child of that element can also then have a variant, and you can do stuff like hover. So it's like, okay, we have a card, and I hover.

[00:00:23]
I want a bunch of stuff to change color, right, cool. You can do all of that and not worry about them hovering over the correct part or something along those lines. And more importantly, not have to use JavaScript event listeners that you have to worry about cleaning up to like, okay, so if it bubbles up and then go apply the styles back down, you get it for free with CSS.

[00:00:45]
So yeah, in this case, you can see, if we look at the markup here, I'll just show you what happens first. Anywhere over this, I would get some highlighting and some underline. And then this delete, it doesn't do anything. But a button to show up and different things that happen as we go through, that will happen with the group.

[00:01:04]
Let's look at that syntax real quick. I'll just open it up. I'm gonna hit my Open button, cool. And it's the same basic idea. On the kind of top level one that we care about, in this case, it's gonna be the li, we say group, and then we say group-hover.

[00:01:23]
Whatever it happens to be, any of the variants, and if you ever are curious which ones you can do, you can just type. And there's a lot of really powerful ones in here. The other one that I kind of just learned about, for a lot of the solutions, I'm using the detailed summary.

[00:01:44]
A little open close, and that'll actually respond to, it has the variant slash the selector open. So you can style it differently on whether or not it's open or closed on top of the actual, no longer use state is open, is closed. You actually just do it with regular DOM, and you can change the styles and everything based on that.

[00:02:07]
Everything that you can do with a variant, you can also do with a group or a peer, right? Like I said before, the only thing with peer is that it's only gonna be future siblings, right, younger siblings effectively, not the ones that came before. But you can do lots of interesting stuff here.

[00:02:31]
You could theoretically take the open close and hide the thing that is opening and closing, right? I've done that before when I wanna have a hidden checkbox, right, or something along those lines that then create. If I wanna have interactivity with no JavaScript involved, there's a lot you can do with a lot of these tools and just not have JavaScript at all.

[00:02:55]
And just do it purely with the DOM and CSS, which is awesome. And this one is actually super important as well. That's data attribute, right? You can actually kind of say, if one of those has a certain data attribute, then its children might get a certain style or something along those lines.

[00:03:14]
And you can also then get that data attribute without the group or the peer as well. It's just a raw one. So if it has this data, you would then do this thing as well. So you've got a lot of options there too that you can kind of come up with interesting use cases for, which I think is super cool.