Arbitrary variants for custom selectors in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Using an arbitrary variant to style a child element

Given the following HTML, which Tailwind class will correctly apply a red text color to the only when its parent

is hovered?

Tailwind

<div class="group">
  <span>Hover me</span>
</div>

A hover:[&>span]:text-red-500

B [&>span]:group-hover:text-red-500

C group-hover:[&>span]:text-red-500

D group-hover:text-red-500 [&>span]

💡 Hint

Think about how to combine group-hover with an arbitrary variant targeting the direct child span.

Option C uses group-hover as the variant and applies the arbitrary selector [&>span] to target the direct child span. This means when the parent div with class group is hovered, the span inside gets the red text color.

Other options either misuse the order or the selector syntax.

❓ layout

intermediate

Applying styles to sibling elements using arbitrary variants

Which Tailwind class applies a blue background to a

element only when the preceding

sibling is focused?

Tailwind

<h2 tabindex="0">Title</h2>
<p>Paragraph</p>

A focus:[&+p]:bg-blue-500

B [&:focus+p]:bg-blue-500

C [&+p:focus]:bg-blue-500

D [&:focus~p]:bg-blue-500

💡 Hint

Use the adjacent sibling combinator (+) with focus on the

.

Option B correctly uses the arbitrary variant [&:focus+p] to target the

that is immediately after the focused element (the

).

Option B incorrectly places focus: before the arbitrary variant, which does not work as intended. Option B targets the wrong element and option B uses the general sibling combinator (~) which is not the immediate sibling.

🧠 Conceptual

advanced

Understanding arbitrary variant specificity

What is the effect of the Tailwind class [&:not(:last-child)]:mb-4 on a list of

elements?

A Adds a bottom margin of 1rem to all <li> elements including the last one.

B Adds a bottom margin of 1rem only to the last <li> element.

C Removes bottom margin from all <li> elements.

D Adds a bottom margin of 1rem to all <li> elements except the last one.

💡 Hint

The :not(:last-child) selector excludes the last child from styling.

The arbitrary variant [&:not(:last-child)] applies styles to all elements except the last child. So mb-4 (margin-bottom 1rem) is added to every

except the last one, creating spacing between items but no extra space after the last.

❓ accessibility

advanced

Using arbitrary variants for focus-visible styling

Which Tailwind class correctly applies a visible outline only when a button receives keyboard focus (focus-visible)?

Tailwind

<button>Click me</button>

A focus-visible:outline-2 focus-visible:outline-blue-500

B [&:focus-visible]:outline-2 [&:focus-visible]:outline-blue-500

C [&:focus]:outline-2 [&:focus]:outline-blue-500

D focus:outline-2 focus:outline-blue-500

💡 Hint

Tailwind supports focus-visible as a variant without needing arbitrary selectors.

Option A uses the built-in focus-visible variant correctly to apply an outline only when the button is focused via keyboard (not mouse). This improves accessibility by showing focus only when needed.

Option A tries to use arbitrary variants unnecessarily. Option A and D use focus which triggers on mouse focus too, not just keyboard.

📝 Syntax

expert

Identifying the correct syntax for nested arbitrary variants

Which Tailwind class correctly applies a green text color to all

elements inside a

only when the
is hovered?

Tailwind

<ul class="hover:[&>li]:text-green-500">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

A [&:hover>li]:text-green-500

B hover:[&>li]:text-green-500

C [&>li:hover]:text-green-500

D hover:[&:hover>li]:text-green-500

💡 Hint

The arbitrary variant should wrap the hover state on the parent and target the children.

Option A uses the arbitrary variant [&:hover>li] which means when the element itself is hovered, target its direct li children. This correctly applies the green text color to all li inside the hovered ul.

Option A tries to combine hover variant with arbitrary variant incorrectly. Option A applies hover on li instead of ul. Option A nests hover twice incorrectly.