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 div
container. All the nested children inside p
elements are selected. Check the example below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="[&>p>span]:text-red-800 [&>p>span]:underline [&>p>span]:ml-2"> <span class="mt-2 block text-lg font-semibold text-center">This span will not be styled by the parent element</span> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem neque, vero earum facere praesentium eveniet id, magnam rerum temporibus accusamus nostrum placeat, alias veritatis explicabo numquam accusantium aperiam doloremque perferendis? <span> Read More </span> </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem neque, vero earum facere praesentium eveniet id, magnam rerum temporibus accusamus nostrum placeat, alias veritatis explicabo numquam accusantium aperiam doloremque perferendis? <span> Read More </span> </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem neque, vero earum facere praesentium eveniet id, magnam rerum temporibus accusamus nostrum placeat, alias veritatis explicabo numquam accusantium aperiam doloremque perferendis? <span> Read More </span> </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem neque, vero earum facere praesentium eveniet id, magnam rerum temporibus accusamus nostrum placeat, alias veritatis explicabo numquam accusantium aperiam doloremque perferendis? <span> Read More </span> </p> </div> |
You can check the working code example on the tailwind playground and also see the output in the following screenshot.
By using the same syntax, you can also select the direct children inside a parent container.