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. Srećno.