Direct Children Selectors in Tailwind CSS

Tailwind CSS provides several powerful methods to target and style direct children of an element, from arbitrary variants to custom selectors and built-in child utilities.

Problem Overview

When working with nested HTML structures, you often need to style only the direct children of a container element. Given this HTML:

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

You want to target only the direct children (header and content divs) without affecting nested elements.

Solution Approaches

1. Using Arbitrary Variants (Tailwind 3.1+)

The simplest approach uses arbitrary variants with CSS selector syntax:

<div class="[&>*]:text-gray-200 [&>*:hover]:text-blue-500">
   <div class="header">header</div>
   <div class="content">...</div>
</div>

Key Syntax Patterns:

• [&>*] - Targets all direct children
• [&>div] - Targets only direct child div elements
• [&>p] - Targets only direct child paragraph elements

INFO

Spaces in CSS selectors must be replaced with underscores in Tailwind classes. For descendant selectors (not just direct children), use [&_*] instead of [& *].

2. Custom Variants Plugin (Tailwind v3)

For projects needing repeated child selection patterns, create custom variants in tailwind.config.js:

plugins: [
  function ({ addVariant }) {
    // Basic child selector
    addVariant('child', '& > *');
    
    // Element-specific child selectors
    addVariant('child-div', '& > div');
    addVariant('child-p', '& > p');
    
    // State variants
    addVariant('child-hover', '& > *:hover');
  }
],

Usage in HTML:

<div class="child:text-gray-200 child-hover:text-blue-500 child-div:p-4">
   <div class="header">header</div>
   <div class="content">...</div>
</div>

3. Native Child Selectors (Tailwind 3.4+)

Tailwind 3.4 introduced native child selectors using the *: variant:

<div class="*:text-gray-200 hover:*:text-blue-500 *:p-4">
   <div class="header">header</div>
   <div class="content">...</div>
</div>

4. Defining Custom Variants (Tailwind v4)

In Tailwind v4, use the @custom-variant directive for more control:

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@custom-variant child (& > *);
@custom-variant child-div (& > div);
@custom-variant child-hover (& > *:hover);
</style>

<div class="child:mt-3 child:bg-yellow-100 child-hover:bg-blue-300">
   <div class="header">header</div>
   <div class="content">...</div>
</div>

Advanced Usage Examples

Combining with Other Variants

Custom child variants work seamlessly with other Tailwind variants:

<div class="child:first:bg-yellow-100 child:even:bg-green-200 child:odd:bg-blue-200">
   <div>First child (yellow)</div>
   <div>Second child (green)</div>
   <div>Third child (blue)</div>
</div>

Table-Specific Child Selectors

Create specialized variants for complex structures like tables:

@custom-variant table-th (& > thead > tr > th);
@custom-variant table-td (& > tbody > tr > td);

<table class="table-th:text-lg table-td:p-2 table-td:hover:bg-gray-100">
  <!-- table content -->
</table>

Recommendations

When to Use Each Approach

• Arbitrary variants: Quick, one-off child selections
• Custom variants: Projects with repeated child selection patterns
• Native *: selector: Simple uniform styling for all children
• Tailwind v4 custom variants: Complex applications needing many child selectors

Variant Order Matters

In Tailwind v3, variant order is significant. Use odd:child: rather than child:odd:. This was improved in Tailwind v4 where child:odd: works correctly.

Browser Compatibility

All these methods generate standard CSS child selectors (>) with excellent browser support, working in all modern browsers and IE9+.

Choose the method that best fits your project's complexity and Tailwind version. For most use cases, arbitrary variants provide the simplest solution, while custom variants offer better maintainability for complex projects.