:first-child and :last-child

Learn :first-child and :last-child pseudo-classes.

What is :first-child?

The :first-child pseudo-class selects the element that is first among its siblings. It is equivalent to :nth-child(1) but reads better.

For example, li:first-child grabs the very first item in a list. To give a different style to the first link in a menu, use nav a:first-child.

This pseudo-class saves you from adding a class when position alone is meaningful.

What is :last-child?

:last-child selects the element that is last among its siblings. It is the mirror of :first-child.

In a horizontal menu, nav a:last-child lets you drop the separator line after the final link. Again, no class is needed; you target by position alone.

If the element is alone — no other siblings — it counts as both first and last; both pseudo-classes match.

Margin and separator patterns

:first-child and :last-child are mostly used to fix margins and separators. If every item in a card list gets margin-left, the first one shifts too; you cancel it with :first-child { margin-left: 0; }.

Likewise, if you put a border-right between links, the last link carries an extra one; :last-child removes it. This pattern keeps flexible lists tidy.

Exercise Style the first and last links of a menu

Write two declarations. First, a nav a:first-child selector with font-weight: bold inside. Second, a nav a:last-child selector with border-right: none inside. Both should sit in their own { } block.

Show example solution

/* add styles for the first and last menu links */
nav a:first-child {
  font-weight: bold;
}
nav a:last-child {
  border-right: none;
}

Test yourself

What does li:first-child match?
```
li:first-child {
  font-weight: bold;
}
```
- The last item in the list
- The item with the 'first' class
- Every item in the list
- The first item in the list
Show answer

The first item in the list — Correct. :first-child selects the first sibling.

Write the selector for the last link of the menu

nav a____ {
  border-right: none;
}

Show answer

nav a:last-child {
  border-right: none;
}

Match each pseudo-class to its position

:first-child

First sibling
:last-child

Last sibling
:nth-child(2)

Second sibling
:nth-child(even)

Even positions

Next lesson: :checked and :disabled

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies