Customize CSS Selectors with Pseudo Classes

Tyler Clark
InstructorTyler Clark
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today