Odd and even row styling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the correct Tailwind class for odd row background

Which Tailwind CSS class applies a background color only to odd rows in a table?

Tailwind

<table class="table-auto w-full">
  <tbody>
    <tr class="?">
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

A row-odd:bg-gray-100

B odd:bg-gray-100

C bg-odd-gray-100

D even:bg-gray-100

💡 Hint

Tailwind uses the keyword 'odd' to target odd-numbered rows.

The class 'odd:bg-gray-100' applies the gray background only to odd rows. 'even:bg-gray-100' targets even rows. Other options are invalid Tailwind syntax.

❓ layout

intermediate

Effect of odd and even row styling on table readability

Why is applying different background colors to odd and even rows helpful in tables?

A It improves readability by visually separating rows.

B It makes the table load faster in browsers.

C It changes the font size of the table text.

D It hides even rows from view.

💡 Hint

Think about how your eyes follow lines in a list.

Alternating row colors help users track data across the row easily, improving readability. It does not affect loading speed, font size, or visibility.

📝 Syntax

advanced

Identify the invalid Tailwind class for even row styling

Which of these Tailwind classes will NOT correctly apply a background color to even rows?

A even:bg-blue200

B odd:bg-blue-200

C even:bg-blue-300

D even:bg-blue-200

💡 Hint

Tailwind uses dashes to separate color names and numbers.

Option A is invalid because 'blue200' lacks the dash between 'blue' and '200'. Tailwind requires the dash for color shades. Other options are valid classes.

❓ rendering

advanced

Result of applying odd:bg-green-100 and even:bg-yellow-100 on table rows

What will you see when a table has rows styled with 'odd:bg-green-100' and 'even:bg-yellow-100' classes?

Tailwind

<table class="table-auto w-full">
  <tbody>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 1</td></tr>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 2</td></tr>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 3</td></tr>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 4</td></tr>
  </tbody>
</table>

A All rows have a light green background.

B All rows have a light yellow background.

C No background colors are applied to any rows.

D Odd rows have a light green background; even rows have a light yellow background.

💡 Hint

Odd and even classes apply different styles to different rows.

The 'odd:bg-green-100' applies a light green background to odd rows, and 'even:bg-yellow-100' applies a light yellow background to even rows, creating alternating colors.

❓ accessibility

expert

Accessibility considerations for odd and even row styling

Which practice ensures odd and even row background colors are accessible for users with color blindness?

A Use only red and green colors for odd and even rows.

B Use very light colors that are barely visible to avoid distraction.

C Use colors with sufficient contrast and combine with other cues like borders or stripes.

D Avoid any background colors and rely only on text color changes.

💡 Hint

Think about how people with different vision perceive colors.

Good accessibility means using colors with enough contrast and adding other visual cues like borders or patterns so everyone can distinguish rows, including those with color blindness.

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