Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Customize CSS Selectors with Pseudo Classes

    Tyler ClarkTyler Clark
    cssCSS

    These special keywords can be used to affect specific selectors in customized ways. For example, when links enter a "hover" state, meaning a user has positioned their mouse over the element, we can apply a new set of styles using the :hover pseudo class. Another great example is styling inputs when a user clicks into it with the :focus pseudo class.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Inside of our style.css, let's make all of our a tags, when we hover over them, change to the color of red. We'll see that now with this, when we hover, they do change to red. Let's inspect this, and force a hover state, using the dev tools. With this forced hover state, we see our defined styles that we did in our style.css.

    00:19 A CSS pseudo-class is a keyword added to a selector that specifies a specific state of the selected element. As the name suggests, and as we saw, when this selector enters a hover state, all of the styles within this block will apply to the selector. If we wanted to target the first li inside of our ul, we could do li first child a, color blue.

    00:43 This is going to style the first li inside of our ul that we've got here, and change the a tag to the color blue. Our dev tools show this as well. Now, inside of our HTML, let's go ahead and add an input tag type of text here.

    00:58 Now we see, when we refresh, when we click into our input box, it's got this blue outline border. Let's go ahead and style that to be green. On focus, we're going to do outline color of green. When we refresh, we'll see that now our outline is green.

    01:13 The focus pseudo-class represents an element, such as a form input, that has received focus, but you usually see this when a user clicks or taps on an element or selects it with the keyboard's tab key. A few other pseudo-classes are nth-child, which allows us to target specific children, such as the 6 or the 7, by passing a number here.

    01:34 Finally, there is also the visited pseudo-class, which represents links that the user has already visited. These pseudo-classes barely scratch the surface. Mozilla shows us many more options of classes that can be used to style elements. I suggest taking some time to look over these.

    Discuss

    Discuss