Children Selector in TailwindCSS – [Select All Direct Children]

One of the reasons why designers loving TailwindCSS is that it provides almost everything that you need. There are many use cases where you might need to select all the children of an element. For this, you can use the children selector in TailwindCSS. Here is a guide how to use it with practical examples.

If you are looking to select a specific child, please check the nth selector in TailwindCSS. This post is about styling direct children inside a container element.

Direct Children Selector in TailwindCSS

Inside an HTML element, you might have different child elements that you want to style. In this scenario, you can use the arbitrary value for children selector in TailwindCSS. Please check the following example, all the child elements of a div are styles using child selector.

In the above example, there are 6 different paragraph elements inside a div container. The arbitrary value [&>p] is applying styles to all the p inside the container element. Here is the working example of the above code and the output is attached as screenshot below.

Selecting All Children Inside a Paragraph

The arbitrary value for direct child selector is not only useful for div elements but you can also use it with other elements. In the following example, all the span tags inside a paragraph element are styled with the same class.

Conclusion

You can select direct children inside an HTML element by using [&>{element}] arbitrary value. This method works find with every HTML elements when it has direct children. You can read more about it on tailwind official docs.