How to Access Direct Children of a Div in Tailwind CSS v3

In this tutorial, we'll explore how to target and style the direct children of a div using Tailwind CSS v3's powerful arbitrary value syntax. This feature allows for more flexible and precise styling, especially when dealing with nested layouts.

The Problem

Consider the following HTML structure:

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

We want to style only the direct children of the div with the class "section", which are the divs with classes "footer" and "content". In regular CSS, we'd use the child combinator selector like this: div.section > div. But how do we achieve this in Tailwind CSS v3?

The Solution: Arbitrary Value Syntax

Tailwind CSS v3 introduced the arbitrary value syntax, which allows us to use the & character to reference the current selector. This feature provides a powerful way to target direct children. Here's how you can do it:

Syntax: [&>*]:{class}

• & represents the current element
• > is the child combinator
• * selects all direct children
• :{class} applies the specified Tailwind class

Let's see this in action with some examples.

Example 1: Adding padding to all direct children

<div class="section [&>*]:p-4">
   <div class="footer">footer</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

In this example, [&>*]:p-4 adds padding of 1rem (p-4) to all direct children of the "section" div.

Example 2: Targeting specific child elements

<div class="section [&>div]:bg-gray-100 [&>.footer]:text-red-500">
   <div class="footer">footer</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

Here, we're applying different styles to different direct children:

• [&>div]:bg-gray-100 adds a light gray background to all direct div children.
• [&>.footer]:text-red-500 makes the text red only for the direct child with the "footer" class.

Example 3: Combining multiple styles

<div class="section [&>*]:p-4 [&>*]:mb-2 [&>.content]:bg-blue-100">
   <div class="footer">footer</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

This example combines multiple arbitrary value selectors:

• [&>*]:p-4 adds padding to all direct children.
• [&>*]:mb-2 adds margin-bottom to all direct children.
• [&>.content]:bg-blue-100 applies a light blue background only to the "content" div.

Practical Example

Let's create a footer with multiple columns, social media links, and a newsletter signup form. We'll use the arbitrary value syntax to style the direct children of our footer container.

<footer class="bg-gray-800 text-white py-12">
  <div class="container mx-auto px-4">
    <div class="[&>div]:mb-8 [&>div:last-child]:mb-0 md:[&>div]:mb-0 md:flex md:justify-between">
      <!-- Company Info -->
      <div class="md:w-1/4">
        <h2 class="text-2xl font-bold mb-4">TechCorp</h2>
        <p class="[&>a]:text-blue-400 [&>a]:hover:underline">
          123 Tech Street, San Francisco, CA 94122<br>
          <a href="mailto:[e-mail]">[e-mail]</a><br>
          <a href="tel:[phone]">[phone]</a>
        </p>
      </div>

      <!-- Quick Links -->
      <div class="md:w-1/4">
        <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
        <ul class="[&>li]:mb-2 [&>li>a]:text-gray-300 [&>li>a]:hover:text-white [&>li>a]:transition-colors">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

      <!-- Social Media -->
      <div class="md:w-1/4">
        <h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
        <div class="flex [&>a]:mr-4 [&>a]:text-2xl [&>a]:text-gray-300 [&>a]:hover:text-white [&>a]:transition-colors">
          <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
          <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
          <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
          <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
        </div>
      </div>

      <!-- Newsletter Signup -->
      <div class="md:w-1/4">
        <h3 class="text-lg font-semibold mb-4">Subscribe to Our Newsletter</h3>
        <form class="[&>*]:mb-2 [&>*:last-child]:mb-0">
          <input 
            type="email" 
            placeholder="Enter your email" 
            class="w-full px-4 py-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
          <button 
            type="submit" 
            class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors"
          >
            Subscribe
          </button>
        </form>
      </div>
    </div>
  </div>
</footer>

![https://imgur.com/B6XHhRx.png]

In this example, we've used several instances of the arbitrary value syntax to style our footer:

1. For the main container:

   • [&>div]:mb-8: Adds margin-bottom to all direct child divs.
   • [&>div:last-child]:mb-0: Removes margin-bottom from the last child div.
   • md:[&>div]:mb-0: Removes margin-bottom from all child divs on medium screens and up.

2. For the company info section:

   • [&>a]:text-blue-400: Makes all direct child links blue.
   • [&>a]:hover:underline: Underlines links on hover.

3. For the quick links section:

   • [&>li]:mb-2: Adds margin-bottom to all list items.
   • [&>li>a]:text-gray-300: Sets the text color of links within list items.
   • [&>li>a]:hover:text-white: Changes link color on hover.
   • [&>li>a]:transition-colors: Adds a smooth transition effect for color changes.

4. For the social media section:

   • [&>a]:mr-4: Adds margin-right to all links.
   • [&>a]:text-2xl: Sets the font size for social icons.
   • [&>a]:text-gray-300: Sets the initial color for social icons.
   • [&>a]:hover:text-white: Changes icon color on hover.

5. For the newsletter form:

   • [&>*]:mb-2: Adds margin-bottom to all direct children of the form.
   • [&>*:last-child]:mb-0: Removes margin-bottom from the last child of the form.

Conclusion

Tailwind CSS v3's arbitrary value syntax provides a powerful and flexible way to target and style direct children of an element. This approach allows you to:

1. Apply styles to all direct children using [&>*]:{class}.
2. Target specific direct children using class or element selectors like [&>.classname]:{class} or [&>element]:{class}.
3. Combine multiple selectors for more complex styling needs.

If you're looking to improve your Tailwind CSS development process even further, check out Tails by DevDojo. This powerful page builder allows you to visually create stunning, responsive Tailwind CSS websites with drag-and-drop ease, making it an excellent tool for both beginners and experienced developers alike.

Happy coding!

Comments

[Ben Sinclair]

This seems like so much extra work compared to using CSS and semantic HTML in the first place ;/

[Madza]

Great work on this! Also, loved the practical examples! 👍💯

[Kuberdenis]

Yeah.. I still haven't broken that barrier and do tags with n-th child. This is useful, thanks.</p>