Bird
Raised Fist0
CSSmarkup~5 mins

First-child and last-child in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

These selectors help you style the very first or very last item inside a group. It makes your page look neat and organized.

You want the first item in a list to have a special color.
You want the last paragraph in a section to have extra space below it.
You want to highlight the first button in a toolbar differently.
You want to remove the border from the last item in a menu.
You want to add a special icon only to the first or last element in a group.
Syntax
CSS
selector:first-child { property: value; }
selector:last-child { property: value; }

:first-child selects an element if it is the first child of its parent.

:last-child selects an element if it is the last child of its parent.

Examples
This makes the first list item red.
CSS
li:first-child {
  color: red;
}
This adds extra space below the last paragraph.
CSS
p:last-child {
  margin-bottom: 2rem;
}
The first button in a group gets a light blue background.
CSS
button:first-child {
  background-color: lightblue;
}
The last div inside a container has no border.
CSS
div:last-child {
  border: none;
}
Sample Program

This example shows a shopping list. The first item is highlighted with a green background and bold text. The last item has a pink background and italic text. The other items have a simple border and normal style.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>First-child and Last-child Example</title>
  <style>
    ul {
      list-style: none;
      padding: 0;
      max-width: 300px;
      margin: 1rem auto;
      font-family: Arial, sans-serif;
    }
    li {
      padding: 0.5rem;
      border: 1px solid #ccc;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
    }
    li:first-child {
      background-color: #d1e7dd;
      font-weight: bold;
    }
    li:last-child {
      background-color: #f8d7da;
      font-style: italic;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shopping List</h1>
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Carrots</li>
      <li>Dates</li>
    </ul>
  </main>
</body>
</html>
OutputSuccess
Important Notes

If the element is not the very first or last child of its parent, these selectors won't apply.

They only look at the position among siblings, not the type of element.

Use these selectors to improve user experience by visually grouping or separating items.

Summary

:first-child styles the first child element inside a parent.

:last-child styles the last child element inside a parent.

They help make lists and groups look clearer and more attractive.

Practice

(1/5)
1. What does the CSS selector :first-child do?
easy
A. It selects the last child element inside its parent.
B. It selects the first child element inside its parent.
C. It selects all child elements except the first.
D. It selects only the parent element.

Solution

  1. Step 1: Understand the selector purpose

    The :first-child selector targets only the very first child element within a parent container.

  2. Step 2: Compare with other options

    :last-child targets the last child, others do not match the description.

  3. Final Answer:

    It selects the first child element inside its parent. -> Option B

  4. Quick Check:

    :first-child = first child selected [OK]
Hint: First-child always picks the very first element inside a parent [OK]
Common Mistakes:
  • Confusing :first-child with :last-child
  • Thinking it selects all children
  • Assuming it selects the parent
2. Which of the following is the correct CSS syntax to style the last child of a <ul> list?
easy
A. ul > li:last-child { color: red; }
B. ul:last-child { color: red; }
C. ul li:first-child { color: red; }
D. ul:last-child li { color: red; }

Solution

  1. Step 1: Identify the target element

    The goal is to style the last <li> inside a <ul>, so the selector must target li elements that are last children.

  2. Step 2: Check selector correctness

    ul > li:last-child correctly selects the last li directly inside ul. Other options either select the wrong element or use incorrect syntax.

  3. Final Answer:

    ul > li:last-child { color: red; } -> Option A

  4. Quick Check:

    Correct syntax for last child inside ul = ul > li:last-child { color: red; } [OK]
Hint: Use parent > child:last-child to style last child only [OK]
Common Mistakes:
  • Using :last-child on the parent instead of the child
  • Confusing :first-child with :last-child
  • Missing the direct child combinator >
3. Given this HTML:
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

And CSS:
li:first-child { color: blue; }
li:last-child { color: green; }

What color will the text "Banana" have when rendered?
medium
A. Blue
B. Green
C. Black (default)
D. Both blue and green

Solution

  1. Step 1: Identify which elements get styled

    li:first-child styles the first li (Apple), li:last-child styles the last li (Cherry).

  2. Step 2: Determine Banana's position

    Banana is the second li, so it is neither first nor last child, so no color styles apply.

  3. Final Answer:

    Black (default) -> Option C

  4. Quick Check:

    Banana is middle child, no color applied [OK]
Hint: Only first or last child get styles, middle ones stay default [OK]
Common Mistakes:
  • Assuming all list items get styled
  • Confusing order of children
  • Thinking styles cascade to siblings
4. This CSS code is intended to color the first and last paragraphs inside a <section> green and blue respectively:
section p:first-child { color: green; }
section p:last-child { color: blue; }

But only the first paragraph turns green, the last paragraph stays black. Why?
medium
A. Because the colors green and blue are invalid.
B. Because the CSS syntax is incorrect.
C. Because section cannot contain paragraphs.
D. Because p elements are not the first or last child of section.

Solution

  1. Step 1: Understand :first-child and :last-child context

    These selectors check if the element is the very first or last child of its parent, regardless of type.

  2. Step 2: Check if p is first or last child

    If other elements (like headings or divs) come before or after the p, then p is not first or last child, so styles won't apply.

  3. Final Answer:

    Because p elements are not the first or last child of section. -> Option D

  4. Quick Check:

    :first-child and :last-child depend on element position, not type [OK]
Hint: Check if element is truly first/last child, not just first/last of type [OK]
Common Mistakes:
  • Assuming :first-child means first of type
  • Ignoring other sibling elements
  • Thinking syntax is wrong when it's position issue
5. You want to style the first and last <li> elements inside every <ul> differently, but only if the <li> is also the first or last child of its parent. Which CSS selectors correctly achieve this?
hard
A. ul > li:first-child { font-weight: bold; } and ul > li:last-child { font-style: italic; }
B. ul:first-child li { font-weight: bold; } and ul:last-child li { font-style: italic; }
C. ul li:first-child { font-weight: bold; } and ul li:last-child { font-style: italic; }
D. ul li:first-of-type { font-weight: bold; } and ul li:last-of-type { font-style: italic; }

Solution

  1. Step 1: Understand the requirement

    We want to style only li elements that are the first or last child of their ul parent.

  2. Step 2: Choose selectors that target direct children and correct position

    ul > li:first-child and ul > li:last-child select li elements that are direct children and first or last child respectively. This matches the requirement exactly.

  3. Step 3: Evaluate other options

    ul li:first-child { font-weight: bold; } and ul li:last-child { font-style: italic; } misses the direct child combinator, which can cause incorrect matches if nested lists exist. ul:first-child li { font-weight: bold; } and ul:last-child li { font-style: italic; } incorrectly applies :first-child to ul. ul li:first-of-type { font-weight: bold; } and ul li:last-of-type { font-style: italic; } uses :first-of-type which selects first li regardless of position among siblings.

  4. Final Answer:

    ul > li:first-child { font-weight: bold; } and ul > li:last-child { font-style: italic; } -> Option A

  5. Quick Check:

    Direct child + :first-child and :last-child = ul > li:first-child { font-weight: bold; } and ul > li:last-child { font-style: italic; } [OK]
Hint: Use direct child combinator > with :first-child and :last-child [OK]
Common Mistakes:
  • Omitting > combinator causing wrong matches
  • Confusing :first-child with :first-of-type
  • Applying selectors to wrong parent element