Odd and even row styling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a background color to odd table rows using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1]">
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Abg-gray-100

Beven:bg-gray-100

Codd:bg-gray-100

Dhover:bg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using even:bg-gray-100 instead of odd:bg-gray-100.

Applying background color without the odd: prefix.

The odd:bg-gray-100 class applies a gray background only to odd rows.

2fill in blank

medium

Complete the code to add a background color to even table rows using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr class="[1]">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Aodd:bg-blue-100

Bhover:bg-blue-100

Cbg-blue-100

Deven:bg-blue-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using odd:bg-blue-100 instead of even:bg-blue-100.

Applying background color without the even: prefix.

The even:bg-blue-100 class applies a blue background only to even rows.

3fill in blank

hard

Fix the error in the code to correctly style odd rows with a green background using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1]">
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Aodd:bg-green-500

Bodd:bg-green-200

Codd:bg-green

Dodd:bg-green-

Attempts:

3 left

💡 Hint

Common Mistakes

Using incomplete or invalid color classes like odd:bg-green or odd:bg-green-.

Using a very light shade like 200 which might be hard to see.

The correct Tailwind class for a green background with medium shade is odd:bg-green-500.

4fill in blank

hard

Fill both blanks to style odd rows with pink background and even rows with yellow background using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1] [2]">
      <td>Row 1</td>
    </tr>
    <tr class="[1] [2]">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Aodd:bg-pink-300

Beven:bg-yellow-200

Codd:bg-yellow-200

Deven:bg-pink-300

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping odd and even classes.

Using the wrong color names or shades.

Use odd:bg-pink-300 for odd rows and even:bg-yellow-200 for even rows.

5fill in blank

hard

Fill all three blanks to create a table where odd rows have purple background, even rows have teal background, and rows highlight on hover using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1] [2] [3]">
      <td>Row 1</td>
    </tr>
    <tr class="[1] [2] [3]">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Aodd:bg-purple-400

Beven:bg-teal-300

Chover:bg-gray-200

Dhover:bg-purple-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover classes that override odd/even backgrounds incorrectly.

Mixing up color shades or prefixes.

Use odd:bg-purple-400 for odd rows, even:bg-teal-300 for even rows, and hover:bg-gray-200 to highlight rows on hover.

Practice

1. What does the odd: prefix do in Tailwind CSS when applied to a list of rows?

easy

A. It styles all rows the same way.

B. It removes styling from odd rows.

C. It styles only the even-numbered rows.

D. It styles only the rows with odd numbers differently.

Solution

1. Step 1: Understand the odd: prefix meaning

   The odd: prefix targets elements in odd positions (1st, 3rd, 5th, etc.) in a list or table.

2. Step 2: Apply to rows

   When used on rows, it applies styles only to those odd-numbered rows, leaving even rows unaffected.

3. Final Answer:

   It styles only the rows with odd numbers differently. -> Option D

4. Quick Check:

   odd: = odd rows styled [OK]

Hint: Remember odd means 1st, 3rd, 5th rows styled [OK]

Common Mistakes:

• Confusing odd with even rows
• Thinking it styles all rows
• Assuming it removes styles

2. Which of the following is the correct Tailwind syntax to style even rows with a gray background?

easy

A. even:bg-gray-200

B. odd:bg-gray-200

C. bg-gray-200:even

D. bg-gray-200-odd

Solution

1. Step 1: Identify the correct prefix for even rows

   The prefix for styling even rows in Tailwind is even:.

2. Step 2: Combine prefix with background color

   To style even rows with a gray background, use even:bg-gray-200.

3. Final Answer:

   even:bg-gray-200 -> Option A

4. Quick Check:

   Prefix even: + class = even:bg-gray-200 [OK]

Hint: Use even: before class for even rows [OK]

Common Mistakes:

• Using odd: instead of even:
• Placing prefix after class
• Using invalid class names

3. Given this HTML snippet with Tailwind classes:

<ul>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 1</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 2</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 3</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 4</li>
</ul>

What background colors will the items have?

medium

A. All items have green background.

B. Items 1 and 3 have blue; Items 2 and 4 have green.

C. Items 1 and 3 have green; Items 2 and 4 have blue.

D. All items have blue background.

Solution

1. Step 1: Understand odd and even row styling

   Items in odd positions (1, 3) get bg-blue-100, even positions (2, 4) get bg-green-100.

2. Step 2: Match items to colors

   Item 1 and 3 have blue background; Item 2 and 4 have green background.

3. Final Answer:

   Items 1 and 3 have blue; Items 2 and 4 have green. -> Option B

4. Quick Check:

   odd = blue, even = green [OK]

Hint: Odd items get first color, even items get second color [OK]

Common Mistakes:

• Swapping odd and even colors
• Assuming all items have same color
• Ignoring the prefixes

4. You wrote this code to style table rows:

<tr class="odd:bg-gray-100 even:bg-white">...</tr>

But the even rows are not white, they remain gray. What is the likely problem?

medium

A. The even: prefix is not supported on <tr> elements.

B. You need to add table-auto class to the table.

C. The parent <tbody> or <table> is missing, so odd/even can't apply.

D. You must use bg-white without prefix for even rows.

Solution

1. Step 1: Check odd/even styling context

   Odd and even styling depends on the element's position among siblings inside a parent container like <tbody>.

2. Step 2: Identify missing parent container

   If <tr> elements are not inside <tbody> or <table>, the browser may not count rows correctly, so even rows don't get styled.

3. Final Answer:

   The parent <tbody> or <table> is missing, so odd/even can't apply. -> Option C

4. Quick Check:

   Odd/even needs proper parent container [OK]

Hint: Ensure rows are inside <tbody> for odd/even to work [OK]

Common Mistakes:

• Thinking even: doesn't work on <tr>
• Forgetting to wrap rows in <tbody>
• Using wrong class order

5. You want to style a list so odd rows have a light blue background and even rows have a light green background, but only if the row contains text longer than 10 characters. Which Tailwind approach works best?

hard

A. Use odd:bg-blue-100 even:bg-green-100 and add JavaScript to add a class for long text rows.

B. Use odd:bg-blue-100 even:bg-green-100 and rely on CSS :has() selector with Tailwind plugin.

C. Use only bg-blue-100 for all rows and ignore text length.

D. Use inline styles with JavaScript to check text length and set background colors.

Solution

1. Step 1: Understand Tailwind limitations

   Pure Tailwind odd: and even: prefixes cannot condition styles on text content length, as CSS lacks selectors for character count.

2. Step 2: Best hybrid approach

   Apply odd:bg-blue-100 even:bg-green-100 classes to rows and use JavaScript to detect text length >10 characters, then add a modifier class (e.g., long-text). Combine with custom variants like long-text:odd:bg-blue-100 via Tailwind config or arbitrary variants for conditional application.

3. Final Answer:

   Use odd:bg-blue-100 even:bg-green-100 and add JavaScript to add a class for long text rows. -> Option A

4. Quick Check:

   Tailwind classes + JS for content length [OK]

Hint: Tailwind odd/even + JS class for dynamic content checks [OK]

Common Mistakes:

• Expecting pure CSS :has() to handle text length
• Using inline styles instead of Tailwind classes
• Ignoring the need for JS in content-based conditions