1 00:00:00,640 --> 00:00:05,090 Pseudo-classes aren't classes at all. You don't use attributes 2 00:00:05,090 --> 00:00:08,648 to add pseudo-classes to your HTML document, 3 00:00:08,648 --> 00:00:12,720 the way you do with classes. Pseudo-classes instead target 4 00:00:12,720 --> 00:00:17,424 elements dynamically by selecting elements in a certain state, 5 00:00:17,424 --> 00:00:22,524 such as being hovered over by a mouse or selected using a 6 00:00:22,524 --> 00:00:27,140 keyboard. Pseudo-classes can also select elements based on 7 00:00:27,140 --> 00:00:32,117 certain characteristics, such as selecting the first element in a list. 9 00:00:33,480 --> 00:00:38,396 Think of a pseudo-class as a keyword we add to a selector 10 00:00:38,396 --> 00:00:40,770 to style a special state of an element. 11 00:00:42,680 --> 00:00:48,700 Here in the MDN Docs, we're seeing a list of standard pseudo-classes. 12 00:00:48,700 --> 00:00:52,601 We're only going to cover a few of these in this lesson, 13 00:00:52,601 --> 00:00:55,340 starting with link pseudo-classes. 14 00:00:56,890 --> 00:01:01,110 Think of all the things a user can do with hyperlinks. 15 00:01:01,110 --> 00:01:04,902 They can simply observe a list of links when a page loads. 16 00:01:04,902 --> 00:01:09,610 They can hover over the link, provided they're using a mouse. 17 00:01:09,610 --> 00:01:11,511 Users can activate the link, which happens once 18 00:01:11,511 --> 00:01:17,350 the user presses down on the link with the mouse or a finger. 19 00:01:17,350 --> 00:01:21,550 And once the user lets go, they'll visit the hyperlink's location. 20 00:01:23,290 --> 00:01:29,048 In my CSS, I styled my links earlier using the a type selector. 21 00:01:29,048 --> 00:01:33,262 But I'm gonna modify that and see if I can get a little more 22 00:01:33,262 --> 00:01:38,870 specific using pseudo-classes. First up, the :link pseudo-class 23 00:01:38,870 --> 00:01:43,210 allows us to style links that have not been visited. 24 00:01:43,210 --> 00:01:46,460 So these are links that haven't been clicked yet by the user. 25 00:01:47,600 --> 00:01:51,186 We can select them by specifying the a element followed 26 00:01:51,186 --> 00:01:54,460 by a colon and the word link. 27 00:01:56,470 --> 00:01:58,980 When you preview this in the browser, your links might 28 00:01:58,980 --> 00:02:03,690 be the dark blue color that we specified. Or they might be 29 00:02:03,690 --> 00:02:09,230 the browser's default visited color, which is a shade of purple. 30 00:02:10,270 --> 00:02:14,180 I'm guessing you've visited Treehouse's site before. 31 00:02:14,180 --> 00:02:16,853 But if you've never been to Codewars, 32 00:02:16,853 --> 00:02:20,830 that link will be dark blue because it's not yet visited. 33 00:02:21,900 --> 00:02:26,255 Let's change what our visited links look like by targeting 34 00:02:26,255 --> 00:02:28,440 the :visited pseudo-class. 35 00:02:43,766 --> 00:02:49,345 And now my visited link, which goes to Treehouse, is colored seagreen. 36 00:02:50,985 --> 00:02:55,216 You might have noticed we used the text-decoration property 37 00:02:55,216 --> 00:02:58,315 to remove the underlines beneath our links. 38 00:02:59,380 --> 00:03:04,054 What if we wanted to restore those underlines upon hover? 39 00:03:04,054 --> 00:03:06,638 We'll target the :hover pseudo-class. 40 00:03:21,865 --> 00:03:26,041 Note this particular pseudo-class only works with a mouse, so 41 00:03:26,041 --> 00:03:30,340 touchscreen audiences won't see the underline. So when 42 00:03:30,340 --> 00:03:34,741 styling, you want to make sure your links look obviously like 43 00:03:34,741 --> 00:03:40,210 links, without forcing your user to hover over them to discover their 44 00:03:40,210 --> 00:03:46,570 functionality. Links aren't the only elements we can apply the :hover 45 00:03:46,570 --> 00:03:51,150 pseudo-class to. We can actually apply it to any element, like 46 00:03:51,150 --> 00:03:57,545 headings or images. Let's try giving the photo of Developer Diane a 47 00:03:57,545 --> 00:04:00,794 border with rounded edges upon hover. 48 00:04:17,636 --> 00:04:21,827 Now, that works, but it feels a little strange. 49 00:04:21,827 --> 00:04:24,643 So I might undo that change. 50 00:04:27,835 --> 00:04:31,800 Finally, let's take a look at a pseudo-class called :focus. 51 00:04:32,800 --> 00:04:38,648 The focus pseudo-class is only applied to interactive elements 52 00:04:38,648 --> 00:04:41,910 like links, buttons, and form elements. The styles are 53 00:04:41,910 --> 00:04:46,108 applied as soon as the element has received focus, which means 54 00:04:46,108 --> 00:04:51,010 the browser discovered that a user is ready to interact with it. 55 00:04:52,620 --> 00:04:55,570 The focus pseudo-class is important to users 56 00:04:55,570 --> 00:04:59,740 who are navigating your site using a keyboard instead of a mouse. 57 00:05:00,760 --> 00:05:03,385 Whether this is due to a broken mouse, or perhaps a disability 58 00:05:03,385 --> 00:05:08,793 impacting the user's vision or motor skills, we want to make sure 59 00:05:08,793 --> 00:05:13,680 it's obvious when the user selects one of our links using the Tab key. 60 00:05:15,170 --> 00:05:20,176 To do that, we'll simply need to define the a element 61 00:05:20,176 --> 00:05:25,070 with the focus psuedo-class, since in this case, 62 00:05:25,070 --> 00:05:30,318 all of our interactive elements are simple text links. 63 00:05:41,764 --> 00:05:47,012 In the browser, if we move forward using the Tab key, or 64 00:05:47,012 --> 00:05:53,827 backwards using Shift+Tab key, we see that once a link obtains 65 00:05:53,827 --> 00:06:00,190 focus, it takes on the styles defined in the :focus pseudo-class. 66 00:06:00,190 --> 00:06:05,043 Now a user dependent on keyboard navigation will be able to tell 67 00:06:05,043 --> 00:06:07,890 the interface element is selected. 68 00:06:09,870 --> 00:06:11,698 So you might ask yourself, 69 00:06:11,698 --> 00:06:16,710 are pseudo-classes only used to detect user interactivity? 70 00:06:16,710 --> 00:06:19,349 That's often what they're used for, but 71 00:06:19,349 --> 00:06:22,730 some pseudo-classes select elements in other ways. 72 00:06:24,660 --> 00:06:29,472 For instance, what if Diane wanted to call attention to her 73 00:06:29,472 --> 00:06:32,368 most recent award or achievement? 74 00:06:32,368 --> 00:06:37,560 We could solve this by adding a class or ID to our HTML. 75 00:06:37,560 --> 00:06:44,545 But pseudo-classes give us another option. 76 00:06:48,020 --> 00:06:52,862 The pseudo-class I've used here, :first-child, means that 77 00:06:52,862 --> 00:06:57,317 of all the list items that are descendants of the ol element, 78 00:06:57,317 --> 00:07:03,201 select only the first one and make it bold. 79 00:07:03,201 --> 00:07:07,895 What's cool is when I update my HTML, 80 00:07:07,895 --> 00:07:15,389 no change is needed to the CSS to select that first list item. 81 00:07:26,233 --> 00:07:30,000 The first item is still bold in my browser. This technique 82 00:07:30,000 --> 00:07:35,263 is great for something like a blog where the content gets dynamically 83 00:07:35,263 --> 00:07:40,096 updated, but you'd still like to call visual attention to the newest post.