Transcript from the "Group Modifiers" Lesson
>> 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: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: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.