CSS - Pseudo Classes and Elements Part 1

Jun 4, 2026 3:00pm UTC (Check your timezone)

Theory Workshop

Instructors: Jess, Carmen, and Eda

Pseudo Classes and Elements

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Pseudo-classes, and How Do They Work?

With pseudo-classes, we can select elements based on their state or position.

Pseudo-classes are written with a colon (:) after the selector.

For example, when an element is hovered over by a mouse, we can use the :hover pseudo-class:

1button:hover {
2  cursor: pointer;
3}

Or, the :first-child to select the first child element:

1<ul>
2  <li>One</li>
3  <li>Two</li>
4  <li>Three</li>
5</ul>
1ul li:first-child {
2  color: purple;
3}

There are lots of other pseudo-classes like :last-child, :first-of-type, :checked, :focus, and so on. We can always consult the MDN docs for all the pseudo-classes we can use!

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Element User Action Pseudo-classes?

When users interact with the elements on the page, it’s useful that they receive feedback to understand the state of those elements. For example, the :visited state for links is helpful for indicating whether the link is visited or not.

Some of these “user-action pseudo-classes” are:

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Input Pseudo-classes?

There are some pseudo-classes we can use for form inputs to make them more intuitive for users.

Some of them are:

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Location Pseudo-classes?

Location pseudo-classes allow us to style elements based on their relationship to the URL.

Some of them are:

There is also an experimental :local-link pseudo-class, we can target the links that point to the same document. Currently, no browser supports this feature.

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Tree-structural Pseudo-classes?

The document tree is the hierarchical structure of elements in an HTML document. With tree-structural pseudo-classes, we can style elements based on their position within the document tree.

With :root, we can target the highest level in the document, and it’s useful for defining common styles for the entire document and setting variables.

Here’s an example from our own website:

(We’ll learn about CSS variables in upcoming lessons!)

1:root {
2  --bwc-black: #0b0810;
3  --bwc-purple: #ba6dc6;
4  --width: 1024px;
5}

With :empty, we can target elements that don’t have child elements.

With :nth-child(n), we can target elements based on their position within a parent element.

Similarly, with :nth-last-child(n), we can target elements based on their position within a parent element, but counting from the end.

n can be a number, or a keyword like odd or even.

 1<table>
 2  <tr>
 3    <th>Item</th>
 4    <th>Price</th>
 5  </tr>
 6  <tr>
 7    <td>Apple</td>
 8    <td>$1.00</td>
 9  </tr>
10  <tr>
11    <td>Banana</td>
12    <td>$0.50</td>
13  </tr>
14  <tr>
15    <td>Orange</td>
16    <td>$0.80</td>
17  </tr>
18</table>
 1th,
 2td {
 3  border: 1px solid lightgray;
 4  padding: 8px;
 5}
 6
 7tr:nth-child(even) {
 8  background-color: lightsalmon;
 9}
10
11tr:nth-child(odd) {
12  background-color: wheat;
13}

With :first-child and :last-child, we can target elements that are the first and last child elements in a parent element.

With :only-child, we can target the only element in a parent element.

Here, only the div element within the first “container” will be selected:

1<div class="container">
2  <div>This is the only item in this container.</div>
3</div>
4
5<div class="container">
6  <div>This is one of two items in this container.</div>
7  <div>Here is the second item.</div>
8</div>
1.container div:only-child {
2  border: 2px solid crimson;
3  padding: 10px;
4  background-color: lightblue;
5}

With :first-of-type and :last-of-type, we can target the first or last occurrence of a specific element.

 1<ul class="items-1">
 2  <li>I'll be green.</li>
 3  <li>I'll be purple.</li>
 4</ul>
 5
 6<ul class="items-2">
 7  <li>I'll be green.</li>
 8  <li>Pass.</li>
 9  <li>Pass.</li>
10  <li>I'll be purple.</li>
11</ul>
1ul li:first-of-type {
2  color: green;
3}
4
5ul li:last-of-type {
6  color: purple;
7}

With :nth-of-type(n), we can target elements based on their position among other sibling elements within a parent element.

1<div class="container">
2  <p>First paragraph</p>
3  <p>Second paragraph</p>
4  <p>Third paragraph</p>
5</div>
1p:nth-of-type(2) {
2  color: red;
3  font-weight: bold;
4}

With :only-of-type, we can target an element that is the only one of its type within its parent.

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Functional Pseudo-classes?

We’ve seen what a function is in the previous lesson when looking at the CSS calc() function. We’ll now take a look at functional pseudo-classes, which are similar to functions in that they accept arguments.

:is() is a pseudo-class that accepts one or more selectors and matches those elements. It can be useful to write more compact CSS code.

For example, instead of this:

1section h1,
2article h1,
3aside h1,
4nav h1 {
5  font-size: 25px;
6}

We can write:

1:is(section, article, aside, nav) h1 {
2  font-size: 25px;
3}

:is() takes the specificity of its most specific argument.

:where() is similar to :is(), but it doesn’t have increased specificity.

1:where(h1, h2, h3) {
2  margin: 0;
3  padding: 0;
4}

:has() allows us to style a parent element based on its child.

This will select article elements that have an h2 as a child element:

1article:has(h2) {
2  border: 2px solid hotpink;
3}

:not() allows us to style elements that are not matched by the given selectors.

Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Pseudo-elements, and How Do They Work?

We can think of pseudo-elements as synthetic elements that don’t directly match any actual HTML elements.

A double colon (::) is used when specifying a pseudo-element.

::before and ::after are commonly used pseudo-elements that allows us to insert content before or after an element.

1<button class="like-button">Like</button>
1.like-button::before {
2  content: "❤";
3  color: hotpink;
4}

::first-letter allows us to target the first letter of an element’s content.

1<p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair...</p>
1p::first-letter {
2  font-size: 4rem;
3}

::marker allows us to target the marker (bullet or numbering) of list items.

There are many more pseudo-elements such as ::placeholder, ::spelling-error and ::selection. We can always check the MDN docs.

Design a Greeting Card

We’ll take a look at this exercise to check our understanding of pseudo-classes and pseudo-elements!