Nested Child Selector in TailwindCSS – [Style Nested Eelements]

When you are designing complex user interfaces you might have nested child elements that you want to style. TailwindCSS provides arbitrary values to select all the nested children inside a parent container.

Styling Nested Child in TailwindCSS

In TailwindCSS, the syntax to style nested child elements with arbitrary value is [&>{element}>{element}]:{class}. In the following example, there are 5 span elements inside the divcontainer. All the nested children inside p elements are selected. Check the example below.

You can check the working code example on the tailwind playground and also see the output in the following screenshot.

nested child selector in tailwindcss

By using the same syntax, you can also select the direct children inside a parent container.

 

Latest articles

Related articles