CODEWITHSUNDEEP
tailwind-css
karentut
karentut

Reputation: 43

CSS selectors assistance with using > *

I am trying to use the following selectors in my tailwinds CSS styling

.class > * {
    width: calc(100% / 3);
}

Where I assign a class- I can use the > * selectors to assign the following width.

I have researched on the Tailwinds CSS, but have been unable to determine how to apply this to a div enclosing some children.

One idea would be to mix vanilla CSS with Tailwinds CSS—or to use some Tailwinds CSS option that I have been unable to locate.

Upvotes: 1

Views: 3547

Answers (2)

tem
tem

Reputation: 167

Using [&>*]: works fine but tailwind also offers a simpler selector to achieve the same goal. Simply prepend your tailwind classes with *: and the styling will be applied to all the direct children of your element.

You can find and example on Tailwind documentation, here.

Upvotes: 1

berkesasa
berkesasa

Reputation: 330

The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to reach all of the children, it is sufficient to give the [&>*] class. I have created a demo for you to understand better.

Demo

Upvotes: 1

Related Questions