First-Child and Last-Child Pseudo-Classes

If you’ve ever wanted to style the first or last item in a list differently—like making the first item bold or the last item a different color—CSS can do that for you automatically.

In this article, you’ll learn how to use the :first-child and :last-child pseudo-classes in CSS to style elements based on their position. No previous coding experience is needed. We’ll go slowly, use simple language, and walk through practical examples you can try yourself.

What Are Pseudo-Classes?

A pseudo-class in CSS is like a special keyword you add to a selector (the part that says which element to style). It tells the browser: “Only style this element if it is in a special state or position.”

You’ve probably seen one already: a:hover (used to style links when your mouse is over them). The :hover part is a pseudo-class.

In this article, we’ll focus on two position-based pseudo-classes:

:first-child – selects an element that is the first child of its parent
:last-child – selects an element that is the last child of its parent

Don’t worry if that sounds confusing. You’ll see it in action soon.

Understanding “Child” in Simple Terms

In HTML, elements can be inside other elements. When one element is inside another, we call it a child of that element.

For example:

<ul>
  <li>Item 1</li>  <!-- child #1 of the <ul> -->
  <li>Item 2</li>  <!-- child #2 of the <ul> -->
  <li>Item 3</li>  <!-- child #3 of the <ul> -->
</ul>

Here:

The <ul> (unordered list) is the parent.
Each <li> (list item) is a child of the <ul>.
Item 1 is the first child.
Item 3 is the last child.

The :first-child and :last-child pseudo-classes let us style these first and last items without adding any extra classes or IDs.

Example 1: Highlight the First List Item

Let’s start with a simple example. We’ll create a list and style just the first item.

HTML

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

CSS

/* Style all list items (just to make them look nice) */
ul li {
  padding: 8px;
  font-family: Arial, sans-serif;
}

/* Style only the first list item */
ul li:first-child {
  font-weight: bold;      /* Make text bold */
  color: darkblue;        /* Change text color */
}

What Happens?

All <li> items get padding and the same font.
Only the first <li> (the one that says “Home”) becomes bold and dark blue.

Try it yourself:

Open a text editor (like Notepad, VS Code, or any code editor).
Copy the HTML and CSS into a single file.
Wrap the CSS in <style>...</style> tags inside the <head>.
Save the file as index.html and open it in your browser.
Change the first item text to something else and see that the style still applies to whatever is first.

Example 2: Highlight the Last List Item

Now let’s do the same thing, but for the last item in the list.

HTML

We’ll reuse the same HTML:

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

CSS

/* Style the last list item */
ul li:last-child {
  color: crimson;         /* Red-like color for the text */
  text-decoration: underline; /* Underline the last item */
}

What Happens?

Only the last <li> (the one that says “Contact”) gets the red color and underline.
If you add or remove items, the style automatically moves to whatever becomes the last item.

Try it yourself:

Add another <li>: <li>Blog</li> at the end of the list.
Refresh your browser.
Now “Blog” should be the last item and will be styled instead of “Contact”.

This is the power of pseudo-classes: you don’t need to manually update classes or IDs when your content changes.

Example 3: Styling the First and Last Together

You can also style both the first and last children in the same list. This can be handy when you want to highlight the “edges” of a list, like in a menu.

HTML

<ul>
  <li>Dashboard</li>
  <li>Profile</li>
  <li>Settings</li>
  <li>Log out</li>
</ul>

CSS

/* Basic style for all list items */
ul li {
  padding: 6px 10px;
  font-family: Arial, sans-serif;
}

/* First item */
ul li:first-child {
  background-color: #e0f7fa;  /* Light blue background */
}

/* Last item */
ul li:last-child {
  background-color: #ffebee;  /* Light red background */
}

What Happens?

The first item gets a light blue background.
The last item gets a light red background.
All items share the same font and padding.

Try it yourself:

Change the text of the first or last item.
Add more items to the middle of the list.
Notice how the styles always “stick” to the first and last positions, not to specific words.

Important Detail: The Parent Matters

:first-child and :last-child don’t just mean “the first element on the page.” They mean:

“The element is the first child of its parent.”

Look at this HTML:

<p>Intro paragraph</p>
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
<p>Ending paragraph</p>

If you write this CSS:

p:first-child {
  color: green;
}

Only the first <p> inside its parent will be green. If the first child of the <body> is a <p>, it will match. But if there is something else before it (like a <header>), then it won’t.

So always think: first child of what? The “what” is the parent element in your HTML structure.

Example 4: Styling Cards – A More Realistic Use

Let’s use :first-child and :last-child on something that looks more like a real webpage section.

HTML

<div class="card-list">
  <div class="card">First card content</div>
  <div class="card">Middle card content</div>
  <div class="card">Last card content</div>
</div>

CSS

/* Basic card style */
.card {
  border: 1px solid #ccc;     /* Light gray border */
  padding: 10px;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}

/* First card in .card-list */
.card-list .card:first-child {
  border-color: green;        /* Green border for first card */
}

/* Last card in .card-list */
.card-list .card:last-child {
  border-color: red;          /* Red border for last card */
}

What Happens?

All elements with class card have the same basic style.
The first .card inside .card-list has a green border.
The last .card inside .card-list has a red border.

Try it yourself:

Add another card in the middle:

<div class="card">Another middle card</div>

Watch how the green and red borders stay on the first and last cards.

Common Mistakes to Avoid

Forgetting the parent
Remember that :first-child applies only if the element is literally the first child of its parent in the HTML.
Confusing :first-child with :first-of-type
:first-child cares about position, not type. If the first child is a <span> and the second is a <p>, then the <p> is not :first-child.
Whitespace usually isn’t a problem
Browsers ignore regular spaces and line breaks between elements for child counting, so your formatting in the HTML file doesn’t affect which is first or last.

Try It Yourself: Mini Practice

Create a simple navigation menu and style its first and last items.

Step 1: HTML

<ul class="nav">
  <li>Home</li>
  <li>Shop</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

Step 2: CSS

.nav li {
  display: inline-block;  /* Make items sit next to each other */
  padding: 8px 12px;
}

.nav li:first-child {
  background-color: #dcedc8;  /* Light green */
}

.nav li:last-child {
  background-color: #ffe0b2;  /* Light orange */
}

Open this in your browser and see how the first and last menu items stand out.

Experiment ideas:

Add more menu items in the middle.
Move “Contact” to the middle and see how the background color moves to the new last item.

Each time you try something new and see how it behaves, you’re building real understanding—celebrate that!

Quick Recap and What’s Next

Here are the key things to remember:

:first-child selects an element that is the first child of its parent.
:last-child selects an element that is the last child of its parent.
They update automatically when you add or remove elements—no need to change your CSS.
You can use them on any element type: list items, paragraphs, divs, cards, and more.

As a next step, you can look into related pseudo-classes like :nth-child() (for selecting the 2nd, 3rd, and so on) and :first-of-type. But for now, if you understand :first-child and :last-child and you’ve tried a few examples, you’ve already made strong progress.

Keep experimenting, keep breaking things (on purpose!), and you’ll be surprised how fast CSS starts to feel natural.

Mudzinga