Before & After Pseudo Selectors

[00:00:00]
>> So one of the questions that we got earlier was before and after pseudoselectors. And I was like, we will get there, and guess what? We are now here, we've arrived. And I have another terrible live coding idea that I'm gonna try to resist the urge for, but it's not gonna work.

[00:00:18]
And so, in this case, the kind of main one, first and foremost, is either this, before content. And, like we saw before, pun unintended, that in brackets you can have arbitrary data, right? And so, in this case, we're putting a string in there, all right, I have a different one for after.

[00:00:40]
And then I can continue to stack up these variant classes for all. I can style them any way that I want, independent of the element itself. And also, [COUGH] we saw earlier that we can stack these as well. So any of the group and peer stuff, you could have, if the group is open, then do an after, or whatever, right?

[00:01:08]
If it's required, then put a little notification that says required afterwards, or something along those lines. You can stack these as much as you want, and kinda combine them, and get a lot of interactivity just with Tailwind, right? For freebies as well. And so, I think that's pretty cool there as well.

[00:01:31]
And again, all the styles work just as they did before, you can take them as elements. And as you know, they're not really kind of there, you can't select them, but they exist on the page, cool. And so, what we could do with this one is, we looked at before when we wanted to say, hey, wouldn't it be great if I could style a label based on whether or not it's required, or something along those lines, or invalid?

[00:02:03]
And we could, we had to use the has operator, which doesn't have great browser support. But there is a dark hack that we could do. And if you don't feel good about it, just wait for the has operator, and then you don't have to feel bad about it.

[00:02:15]
But we could do something similar as well. And we could use, effectively, a flexbox, and then reverse the order. So in the DOM, it's afterwards, but it shows up before. And you could do something like that as well. And it does combine and stack them. I think the more important part is I can't come up with a more egregious reason to do this.

[00:02:37]
So just to kind of demonstrate how you can stack these, let's go for it. All right, so we'll give ourselves a div, it's gonna be great. And this time, we'll say the input, and we're gonna say that it is required. And I'm just gonna do some light styling to it, cuz I can't live with that.

[00:02:58]
If you want me to focus, I need it to look good, sorry. So, let's say border, That seems like a fine border. Great, and we'll say, placeholder, I am required, cool. Fine, that's good enough for our purposes. And we'll close that tag as well. And so you could theoretically put the label here.

[00:03:41]
And if you don't feel good about this, I don't blame you. But it's mostly so I can show you how you can stack these things, more than I endorse this as a plan. So we'll say, Required Field, Let's make that, Great. And we'll go into the depths of flex and grid in a little bit.

[00:04:13]
But mostly to show that we can stack these in interesting ways to create interactive pieces. There are more practical ways, absolutely. But since we were talking about it during a break, now we're gonna do it. So, we'll say, I think I'm gonna make these both blocks, too. There we go.

[00:04:50]
Why is that no worky?
>> Flex added before the flex column reverse?
>> What's that?
>> Do you have to add flex before flex column reverse?
>> I do, this is why you pair program with ten of your friends at the same time. All right, there we go, there it is.

[00:05:11]
So now, theoretically, with that peer selector, we know that only does future siblings, which it technically is now. So you could do something like peer, and then we'll say peer required, and then we'll say after. And then we'll just say like, And so now I can theoretically, no, I could add something to a label if it is required, cuz we're using the peer selector.

[00:05:49]
We know about isRequired, we can stack peerRequired, and then after. And you can probably find other clever ways to set this up as well. But there are ways around it if it is something that you really want to do. And it's not the worst thing in the world, it's not the best, either.

[00:06:07]
Then we can do after, and we'll just say like, text-red or something like that. Text-red, not 300. And yeah, you can do all sorts of stuff, you can say like, after, and it will say, margin-left, get a little bit of space. You can do whatever you need to do in this case, you can make it all work.

[00:06:43]
And now you will get, if this is no longer a required input field, where did I write that? Cuz now everything's upside down backwards. We will lose the pseudoselector there, right? So you can stack these up, you can kinda compile them into different ways. You've got open, like I said before, you can do some interesting stuff with checked as well, kind of even with a hidden thing.

[00:07:08]
Cuz if you have a label associated with it, you can sell it however you want. You can have the label hidden and stuff along those lines. There's a bunch of really interesting things that you can do with zero JavaScript whatsoever, which is kind of fun. Look at me, I'm enjoying CSS all of a sudden.