Part 40: Focus-Visible, Focus-Within & Disabled States

Advanced pseudo-classes are essential for accessible and polished web applications.

1. focus-visible:* (Accessibility Best Practice)

Shows focus outlines only when navigating via keyboard (TAB key), hiding distracting rings when clicked with a mouse:

<button class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2">
  Accessible Button
</button>

2. focus-within:*

Styles a parent container when any child inside it receives focus (perfect for search bars with icons):

<div class="flex items-center border border-slate-300 rounded-lg px-3 py-2 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition">
  <svg class="size-5 text-slate-400"><!-- Search Icon --></svg>
  <input type="text" class="outline-none ml-2 w-full" placeholder="Search..." />
</div>

3. disabled:*

<button disabled class="bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded">
  Unavailable
</button>

Key Takeaways

• Use focus-visible to satisfy accessibility requirements without annoying mouse users.
• Use focus-within on input wrappers to highlight the entire search box.

In Part 41, we will style child elements based on parent state with group-hover and group-focus!