Welcome back everybody. Today we're going to talk very briefly about pseudo classes and elements. So we've been working with different types of elements throughout this entire course, and how we can structure them and style them. Well, pseudo elements are kind of different from the other things we've seen before in that they are very dependent on the DOM structure, and some of them are actually dynamically populated. So, to be honest, you have seen this before back when we talked about styling links because the links had those different states. One example we used was the idea of hover. If you hover a link, you can change the style to get rid of maybe the underline or change the color. So, let's talk about some of these different types of pseudo-classes beyond what you can do with just a link. I started off with the one we've seen before. You can have a link and also a link that's been visited. You can also react to different user actions. So, if someone's hovering over a paragraph or hovering over an H1 tag, you can still react to it. It doesn't just have to be a link. You can also have active, and active is when you're holding the mouse button down over some sort of element. And the last one is focus. Focus would be when someone's tabbing through the page you can put focus down on each one of these. Finally, one that makes a lot of sense and you've probably seen before is that you can dial the pseudo-classes of forms or interfaces. If the check box has been clicked or checked off, you can see that sometimes they make it yellow. Or if you've ever been to a site and you're not allowed to type something in until you type something in a box above, higher in, they tend to gray it out. So the way you would go ahead and do this is you could say, you know what? If someone hovers over my paragraph, I want to just do a border. Border:1 px. Now, even though there's no place on the DOM where they have p:hover, it should work for you when you put that styling rule in. So, you can also style based on the structural position of the different elements. You have first-child, last-child, nth-child. The way that one works is you put a number in to say the fifth child or the tenth child. You can have only child. You also have other different things such as first-of-type, last-of-type, only-of-type. And again, you just have the element, the colon, and then the name of the pseudo-class that you want to style. Pseudo elements aren't necessarily part of the DOM, but they can be used to style specific or unique parts of the page. So, some examples might if you have a paragraph and you wanna put in that fancy first letter with a different font, you can use the first letter pseudo element. Same with the first line, you can generate things to show up before or after elements. A lot of times if you're styling something like credit card information, you can go ahead and put in the different types of credit cards but have a little before that says, and hey, put a picture in here. You can also style just fragments of different selections. Now I didn't give you much code when we went through here because really using pseudo classes and pseudo elements is very unique to the page you're going to make. So later when we talk about tables, keep an eye out because I'm going to be using a lot of pseudo classes and pseudo elements there. It's really important to realize that I'm not going to be able to cover every combination of everything we learn about. But I do want to give you the tools so that you can go out and investigate how you can add some cool new styles to your page. Good luck.
