Up next in 10
CSS Tutorial For Beginners 19 - Pseudo Selectors
647 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers delve into pseudo-selectors, a powerful feature enabling the styling of elements based on their state or position in the document structure. The video likely covers the syntax and usage of pseudo-selectors, which allow users to apply styles to elements that cannot be targeted using traditional selectors. Viewers can expect to learn about various pseudo-selectors, including :hover, :active, :focus, :first-child, and :nth-child, along with practical examples illustrating their application in CSS styling. This tutorial serves as a valuable resource for beginners seeking to enhance their CSS skills and create more interactive and dynamic web designs.
View Video Transcript
0:00
Yo guys, what the hell is going on
0:09
This is CSF for Beginners Lesson 19. I'm Sean from the Net Ninja and today we're going to talk about pseudoclasses
0:16
That's coming up. Okay, so what exactly is a pseudo class? Well, there's a question
0:22
So essentially, pseudoclasses are special keywords that go after selectors. That's important
0:27
They go after them. They're like an extension of selectors and what they do is help us to target things we wouldn't normally be able to target with normal CSS selectors
0:38
And these things could be things like special behavioral states on a webpage or advanced structural elements
0:45
Okay, so let's have a look at those two groups in more detail. Now, they have names, those two groups, dynamic and structural
0:52
And strictly speaking, not all pseudo-classes fit into one of these groups, but most of them do
0:57
okay so the dynamic group what are they well they're based on behavior so for example when
1:03
someone hovers over a link on your website does it change color that's all controlled by a dynamic
1:09
pseudoclass and the structural group is more to do with selecting advanced structural elements okay
1:16
things you wouldn normally be able to do with normal CSS rules for example advanced or complex parent relationships Okay So looking at dynamic pseudo a little more deeply we already said that it allows
1:31
us to style an element in relation to user actions, okay? So that could be things like when you hover over a link
1:38
Does it change color or underline it or do anything else to it? Or whether when a button is being pressed, does that button change
1:46
So when you click that little thing on your mouse to press a button, a submit, button what happens to that button you know do you give it an emboss or move it slightly or
1:54
change the colour that kind of thing or whether a tick box has been checked on a form you know
1:58
those forms like when you're buying something online and at the bottom it's got a little tick
2:03
box and it says if you did not wish to not not not not join our mailing list then do not
2:09
not not click here okay so something like that if you have one of those checkboxes and you click it
2:15
you can use a dynamic pseudo class to make that checkbox display differently okay
2:19
That's all there is to it. So, what's the other group? Structural pseudo-classes
2:24
Now, like we said, they're used to target more advanced structural elements
2:28
that we couldn't normally do with normal CSS rules. Okay? So say you've got a UL list and you've got 10 LI tags in that UL list
2:37
And none of them have classes and none of them have IDs so you can't target specific LI tags using that
2:44
The only way to target say the fifth tag LI tag or the seventh LI tag would be to use a structural pseudo class Or we could use a structural pseudo class to target a parent element on a HTML document that has no children
2:59
We could say we don't want to display that on the web page because it's got no children. There's, you know, there's no meat to it
3:04
So that's what structural pseudo classes are all about. So now we've got that out of the way and we know what those two groups are all about
3:11
We're going to jump into the code and look at the general sense. syntax of pseudo classes
3:16
Okay gang, I'm back here in the HTML and we're just going to look at the basic
3:21
syntax for now. I'm not going to go into too much detail or give specific examples, just a basic syntax
3:27
Okay, and the way it works is this. You have your selector and let's just say it's a class
3:31
Okay, so you have your class, oops, your class, that would be a normal selector, right
3:36
Whatever the class name is. And we could style it. Now the way we apply a pseudo class to this is by putting first of all
3:44
a little colon. That there is saying that a pseudo class is coming up, okay? And then we write
3:48
the pseudoclass keyword, so whatever that might be, the keyword goes there, okay? So I'll give
3:54
you a specific example. Say, for example, we want all the A tags, all the links on the web page
4:00
to change color when they hovered over. Now, the way we do that is by putting it in A first of all
4:05
That how we normally select all the A tags And then we use a pseudo class so we put our little colon and then the keyword for this one is hover Now you don need to remember this now I gonna go into more detail about specific examples in later videos just showing you how it works now okay so that our normal
4:22
selector targeting all the eight elements and then we've got our colon signifying
4:27
that we're gonna use a pseudo class and then this is our pseudo class keyword hover and we'll change the color to red okay so let's say this let's see if
4:36
this works we'll open it in a browser So there's our links and we'll hover over them
4:45
And yep, cool guys, they work. Awesome. So that's about it for the general syntax
4:51
You can do this with any selector, you know, you could do any ID, so main contents when you
4:58
hover over that. I want it to change background colour to red
5:06
It's going to look stupid, but you get the idea. Okay, so if you have any questions about these pseudo classes whatsoever, throw a comment down below
5:13
I'm going to answer all of those for you as soon as I can. If you enjoy these videos, please like them
5:19
I'll share them or subscribe, and I'll see you guys in the next one