Pseudo-Class

Quick reference

• 00:05 In this video I want to talk about pseudo classes, and
• 00:07 we've already seen some pseudo classes already with links.
• 00:10 But if we come back to our stylesheet, we can come back to our link section,
• 00:14 you see these colon hover, colon active.
• 00:17 Those are pseudo classes and we can do all kinds of stuff with this.
• 00:20 In fact we've already used the hover.
• 00:22 We can do that some more.
• 00:24 You could put a hover on just about anything.
• 00:26 Let's say back around blue.
• 00:27 Come back here.
• 00:33 This is blue.
• 00:34 Save it.
• 00:35 Come back here and hit reload.
• 00:37 If we hover over this it turns blue.
• 00:39 So there's all kinds of weird stuff you can do with pseudo classes.
• 00:41 And like I said, we've already looked at a few.
• 00:44 Hover, the length, the visitative, the active for links.
• 00:47 But you can use these for other things too.
• 00:50 So let's do, we can do some weird kind of stuff here.
• 00:53 So let's come back here and play around with this a little bit.
• 00:55 Let's turn this back to CCCCCC and
• 01:00 let's give this a display of none and
• 01:05 a padding of 15 pixels.
• 01:08 And now let's come down here.
• 01:10 Actually, let's change this P to regular P and I'm gonna come back here and
• 01:14 delete our original P that we did at the beginning of the course.
• 01:18 So now if we give a div one of these hovers.
• 01:22 And remember the last video we talked about combinators and
• 01:25 one of them was a descendant.
• 01:26 So let's do a descendant p.
• 01:29 And if you remember from the last video that means that any p that follows inside
• 01:33 of a div will have this stuffed onto it.
• 01:35 So let's give this a display of block.
• 01:40 Come back here to our index page and let's wrap this all in a div.
• 01:50 We need to give our div some text so that something shows up.
• 01:54 Let's go hello world.
• 01:56 Save this.
• 01:57 Okay, now we get this hello world.
• 01:59 If we hover over the hello world, boom, this thing pops up beneath it.
• 02:03 So there's all kinds of weird stuff you can do with pseudo classes.
• 02:07 Now another cool thing about pseudo classes is the first child element.
• 02:11 So we talked about childs in the last video, but
• 02:14 you can actually do things depending on the number of the child.
• 02:18 So if we have an un-ordered list with an li,
• 02:23 we can give that a first-child designation and
• 02:28 call background color.
• 02:31 Let's go CCCCCC.
• 02:33 Now if we save this and come back to our index.
• 02:40 And let's create a very quick list with
• 02:45 li-first, li-second, li-third.
• 02:50 And if we save this and come back, we see the first one is gray and
• 02:54 the rest of them are not because we've designated in our style sheet that
• 02:58 the first child does gray.
• 02:59 We can change this to last child.
• 03:01 If we save this and come back, then boom, the last one we'd do something to.
• 03:07 And this is useful for all kinds of things.
• 03:09 So we have first child, we have last child.
• 03:11 We can also do nth child.
• 03:14 And nth means we can designate which child we want.
• 03:17 So let's say we want the second child.
• 03:19 Do that, now it becomes the second.
• 03:22 Say we want the first child, changes the first.
• 03:25 So if you have a long list and you know you have 27 things and
• 03:28 you wanna highlight the 24th thing you could do it like that.
• 03:32 So those are pseudo classes, some very interesting stuff we can do with them and
• 03:36 that's all for this video

Lesson notes are only available for subscribers.