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

Styling List Items with First-child and Last-child in Tailwind CSS

📖 Scenario: You are creating a simple webpage that shows a list of fruits. You want to style the first and last items in the list differently to make them stand out.

🎯 Goal: Build an HTML list of fruits and use Tailwind CSS classes to style the first item with a green background and the last item with a blue background using first: and last: variants.

📋 What You'll Learn

Create an unordered list with exactly 5 fruit names as list items.

Use Tailwind CSS first:bg-green-200 to style the first list item with a light green background.

Use Tailwind CSS last:bg-blue-200 to style the last list item with a light blue background.

Ensure the list is inside a <main> element with proper semantic HTML.

Make sure the page is responsive and uses semantic HTML5 elements.

💡 Why This Matters

🌍 Real World

Styling lists with first-child and last-child selectors is common in menus, navigation bars, and item lists to highlight important elements.

💼 Career

Understanding how to use Tailwind CSS variants for pseudo-classes like first-child and last-child helps you build visually appealing and accessible user interfaces quickly.

1

Create the HTML structure with a list of fruits

Create a <main> element containing an unordered list <ul> with exactly five list items <li>. The list items should be: Apple, Banana, Cherry, Date, and Elderberry.

Tailwind

Need a hint?

Use semantic tags: <main> for the main content and <ul> for the list. Add exactly five <li> elements with the fruit names.

2

Add Tailwind CSS classes for first-child and last-child styling

Add Tailwind CSS classes to the <ul> element so that the first list item uses the class first:bg-green-200 and the last list item uses the class last:bg-blue-200. This will style the first item with a light green background and the last item with a light blue background.

Tailwind

  
    Apple
    Banana
    Cherry
    Date
    Elderberry
  

 -->

Need a hint?

Add the classes first:bg-green-200 and last:bg-blue-200 inside the class attribute of the <ul> tag.

3

Wrap the list in a container with padding and center alignment

Add a div container around the <ul> inside <main>. Give this div the Tailwind CSS classes p-6 for padding and max-w-md mx-auto to center it horizontally with a max width.

Tailwind

   in a div with padding and center alignment -->
  
    Apple
    Banana
    Cherry
    Date
    Elderberry
  

Need a hint?

Wrap the <ul> inside a <div> with classes p-6 max-w-md mx-auto to add padding and center the content.

4

Add accessible roles and aria-label for the list

Add the attribute role="list" and aria-label="Fruit list" to the <ul> element to improve accessibility for screen readers.

Tailwind

  
    
      Apple
      Banana
      Cherry
      Date
      Elderberry
    
  

 -->

Need a hint?

Add role="list" and aria-label="Fruit list" inside the <ul> tag for better accessibility.