Bird
Raised Fist0
CSSmarkup~30 mins

First-child and last-child in CSS - Mini Project: Build & Apply

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
Styling List Items Using :first-child and :last-child
📖 Scenario: You are creating a simple webpage that shows a list of fruits. You want to style the first fruit in the list with a green background and the last fruit with a red background. This helps users quickly see the start and end of the list.
🎯 Goal: Build an HTML page with a list of fruits and use CSS :first-child and :last-child selectors to color the first item green and the last item red.
📋 What You'll Learn
Create an unordered list with exactly these fruits in order: Apple, Banana, Cherry, Date, Elderberry
Add CSS to style the first list item with a green background using :first-child
Add CSS to style the last list item with a red background using :last-child
Use semantic HTML5 structure with <main> and <section>
Ensure the page is responsive and text is readable
💡 Why This Matters
🌍 Real World
Styling first and last items in lists is common in menus, navigation bars, and content lists to highlight important elements or create visual balance.
💼 Career
Understanding CSS pseudo-classes like :first-child and :last-child is essential for front-end developers to create polished, accessible, and user-friendly web pages.
Progress0 / 4 steps
1
Create the HTML list of fruits
Create a <main> section containing a <section> with an unordered list <ul>. Inside the list, add exactly these list items in order: Apple, Banana, Cherry, Date, and Elderberry.
CSS
Hint

Use <li> tags inside the <ul> to list each fruit exactly as given.

2
Add a CSS block to start styling
Add a <style> block inside the <head> section of the HTML. Inside it, create a CSS rule for ul that sets font-family to Arial, sans-serif and font-size to 1.2rem.
CSS
Hint

Put the CSS inside a <style> tag in the <head>. Target the ul element.

3
Style the first and last list items using :first-child and :last-child
Inside the existing <style> block, add CSS rules to style the first list item li:first-child with a green background color #90ee90 and the last list item li:last-child with a red background color #f08080. Also add padding: 0.5rem and border-radius: 0.3rem to both for better look.
CSS
Hint

Use li:first-child and li:last-child selectors to style the first and last list items respectively.

4
Add responsive and accessibility improvements
Add a meta tag inside the <head> for viewport with content width=device-width, initial-scale=1.0. Also add aria-label="Fruit list" to the <ul> for accessibility.
CSS
Hint

Add the viewport meta tag inside <head> for responsive design. Add aria-label="Fruit list" to the <ul> for screen readers.

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