Start Here
3 lessons

Module 3 - Lesson 5

CSS Pseudo-classes

Lesson Overview

In this lesson, I’ll give you an overview of pseudo-classes in CSS – selectors that select elements that are in a specific state – for example, they are the first element of their type, or they are being hovered over by the mouse pointer.

Video Chapters

00:00 Introduction

00:47 Pseudo-class Syntax

02:40 :active

03:19 :hover

04:47 :first-child

05:48 :first-of-type

06:54 :nth-child(n)

07:45 :nth-last-child(n)

08:00 :last-child

08:09 :last-of-type

Action Items

Choose an element on your website and try to target it without using its class or id. Try using the pseudo-class and order in which the element is displayed on a page. Repeat for as many elements as possible until you get familiar with the pseudo-selectors (try using different ones: nth-child, last-of-type, etc.)