Tailwind Arbitrary Values

This is parent ul
<ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">
<ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">
Any ideas why this is not working ? I am trying to change padding for the second child and it just doesn't work. I tried with self-reference &, &*, &>*. The last 2 not exactly sure how it works. I assume this > is used for children elements to point they parent and * to select all of the elements. Correct me if I am wrong.
14 Replies
Mannix
Mannixā€¢6mo ago
are you trying to set 2 different gap values? you can only have 1 gap value gap is not margin or padding you can't set different sizes for children
Psyzen
Psyzenā€¢6mo ago
Yes. But from your question I realized I am doing something wrong. What I generally wanted is to have gap-2 for all <li> and for the second and third to have gap-1. But just realized I want the first and second gap be smaller. And you just mentioned it is not a margin or padding. Any solutions for it ?
Mannix
Mannixā€¢6mo ago
you have use margin on the children to space them how you want them
Psyzen
Psyzenā€¢6mo ago
I guess I should set initial gap-1 and the rest to have margin to fill the rest Thank you.
Mannix
Mannixā€¢6mo ago
yup set the gap and the add more space with margin basically
Psyzen
Psyzenā€¢6mo ago
Alright. Let's say if I want to have gap only once but start from the third-child ? Could that work since it will be only be one gap? I guess question would be how to do it :/
Mannix
Mannixā€¢6mo ago
nope gap is for all childreen
Psyzen
Psyzenā€¢6mo ago
Damn, it would be nice to disable selected gap. Like gap:remove(odd,even, 2, etc.) Or something like that.
Mannix
Mannixā€¢6mo ago
maybe one day šŸ™‚
Psyzen
Psyzenā€¢6mo ago
Thank you for answering.
Mannix
Mannixā€¢6mo ago
np good luck with your coding thumbup
Psyzen
Psyzenā€¢6mo ago
Thank you. I was stuck with side-nav bar but I managed to re-make it someone else. I was learning grid-box and some html 5 tag usage like nav, sections. I know those are not a must but I wanted to learn for easier distinction. Tho I am still unsure if section is allowed in nav.
MarkBoots
MarkBootsā€¢6mo ago
you could do something like this. Set the gap size to a custum property. And then with the item:nth-child() you can adjust the margin-top to -1*gap https://codepen.io/MarkBoots/pen/WNPmwqx?editors=1100
Psyzen
Psyzenā€¢6mo ago
I ended up with this. https://codepen.io/LCSNeo/pen/VwggLRO I am sure there is plenty of ways to improve on it probably.
Want results from more Discord servers?
Add your server
More Posts