Pseudo-elements

[00:00:00]
>> Let's talk a second about pseudo elements. I'm not gonna dwell too much on these, I just want you to see them. So let's say I had this chapter book kind of thing, I don't know if you've read a book and there's a little like flare at the end of every chapter, right?

[00:00:15]
There's some little signatory like a little picture, right? Frequently it looks like this, this is called a fleuron., which I had to look up for this class cuz I actually did not know what they were called. It took me a while Googling weird things to figure it out.

[00:00:30]
Picture, icon, you sometimes see at end of chapter book, yeah, anyway I found it, it's called a fleuron. So notice I look at my CSS here, I have a div, that's a class chapter. And I have nothing underneath them. But I wanna make this little fleurons thing show up at the end of every chapter here, right?

[00:00:50]
What you can do is you can use what's called a pseudo element. So notice that I have two colons here, that's how you know it's a pseudo element. I can then select this hidden elements that exists after every single element. First you tell it the content. So this can be, Literally anything, right?

[00:01:17]
So you can put anything in there, right? And then I can style it however I want. I can make it color red, right? You can style it however you want. Put this back in here. That's what you would use a pseudo element for. So, there's before and after, those are the two that come most of mine of what I use.

[00:01:42]
A good example is like this result thing that I have right here that shows the top of this border. This is actually a pseudo element that I put result and so that people can know that this is the result of the HTML up here, right? So that's when you would use something like a pseudo element.

[00:02:00]
Something that you want to stylistically display to know what it actually is. Does that make some sense? You can get by, by never using pseudo elements. But I wanted to show you cuz they're out there and sometimes people will use them. Technically one colon would be valid here.

[00:02:24]
Notice that this still works,. That's because the old way of pseudo classes and pseudo elements used to not be different, they used to be, I think they were both pseudo classes. But they eventually ended up changing them so that they're now different, there's pseudo elements and pseudo classes.

[00:02:38]
They're different. And that's why we prefer now to use two colons so that we know everything with one colon is pseudo elements, sorry, everything with one colon as pseudo classes and everything with two is pseudo elements. You'll notice one thing with the Web Dev is that they never break things.

[00:02:55]
They always want old websites to work. Like famously the Space Jam website worked for 20 years or something like that longer, longer than 20 years, in modern browsers. And that's because they try not to break anything. Okay, Yeah, now, one fun fact is you can totally use CSS to style books and newspapers and things like that.

[00:03:25]
I know a lot of books these days are styled with CSS, that's called print layouts. Okay, that's it for pseudo classes and pseudo elements. Any questions about that? Pseudo classes, we use all the time, like hover states, and focus dates, and nth child, and first child. Yeah, one thing I didn't show you here is we did first child.

[00:03:55]
You can also do nth child. So now the second one, right? nth is just like the numberth, right, nth child. You can also give it a formula, right? So like if I said, let's get a fourth one here. If I say 2n, now it's every other one, right?

[00:04:23]
So the n is giving it like a equation to use. You could do 2n-1, and now it's the odd ones, right? You can get really wild, like 1- 2n. Now you gotta remember, maybe it's -n + 1. There we go. So it's trying to do so like, Do you want it to do all of the ones that are from two and below that's how you would do it this way.

[00:05:08]
So you can give it all sorts of fun stuff if you need to do crazy selectors. You should never have to really know that, but It's there and available if you need to. Yeah, this kind of stuff is useful. Pseudo elements, I very rarely use them.