I'm iterating over list items in a for loop, so I only have one li I can apply styles to, so the peer class won't work in this case.
In CSS I can do this
li + li {
margin-top: 20px;
}
How can I achieve this same effect in tailwind?
You can do this with the child selector. Giving the parent div the class [&>li:nth-child(n+2)]:mt-10 will fix the problem. You can check it out in the demo below.
Demo
You can style the first child with first modifier of the tailwind css. Following below is the example
<script src="https://cdn.tailwindcss.com"></script>
<div class="list-disc text-green-700 p-8 space-y-4">
<li class="first:text-blue-700">ListItem 1</li>
<li class="first:text-blue-700">ListItem 2</li>
<li class="first:text-blue-700">ListItem 3</li>
<li class="first:text-blue-700">ListItem 4</li>
<li class="first:text-blue-700">ListItem 5</li>
<li class="first:text-blue-700">ListItem 6</li>
<li class="first:text-blue-700">ListItem 7</li>
<li class="first:text-blue-700">ListItem 8</li>
</div>
You can also view the demo here
Found a solution:
Use the space selector - space-y-* on the parent. It acts like > * + * in normal css.
Example:
<ul class='space-y-5'>
<li>my list item</li>
<li>my list item</li>
<li>my list item</li>
</ul>
This will apply a margin top to every li except the first one.
Related
I set up a simple css based dropdown navigation.
The last category of the main navigation (named login) is supposed to look different from the rest, hence I simply applied a different style via last-of-type.
However the style now gets applied to the drop-down menus as well, meaning the last item of the dropdowns have said style applied also.
(Also, I cannot target them with nth-... selector since there will be new categories added / removed every once in a while.)
How would I stop this form happening?
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <-- unfortunately different style also...
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <-- different stlye
</ul>
If you use a wrap for your unordered lis you can use something like this
<div class="test">
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <!-- unfortunately different style also...-->
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <!-- different stlye -->
</ul>
</div>
So the CSS
.test > ul > li:last-of-type{color:red;}
set style only for the first ul after div.test and doesn't affect the other nested elements
Codepen
Here is my code as simple as possible for convenience.
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
<html>
<head>
</head>
<body>
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
</body>
</html>
So I have tried to follow this code example from this webiste and do the same with my code, but it didn't worked.
Could you explain to me why? And show me the correct way ?
Because element with id #hidden is child and not sibling of the element with id #visible. You can use Descendant selector:
#hidden {
display: none;
}
#visible:hover #hidden {
display: block;
}
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
References
Adjacent sibling selectors
It doesn't work because you are using the adjacent sibling selector (+). #hidden is a descendent of #visible so no intermediary selector is required:
#hidden {
display: none;
}
#visible:hover #hidden {
display: block;
}
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
Your current selector would work for a similar structure to the following, which is obviously invalid:
<ul>
<li id="visible">
Names
</li>
<ul id="hidden"> /* #hidden is now a sibling of #visible */
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</ul>
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
Using CSS, is it possible to select the first N items matching a class, when they don't have a common parent? I know it is possible when they have a common parent, using nth-child I believe, but that only works when all the elements have a common parent, because that's the only case when they are siblings.
Here's an example of my specific situation. In this example, I want to select the <li> for tasks 1 to 5, using CSS. Possible?
<div id="todo-lists">
<ul class="list">
<li>Task 1</li>
<li>Task 2</li>
</ul>
<ul class="list">
<li>Task 3</li>
<li>Task 4</li>
<li>Task 5</li>
<li>Task 6</li>
</ul>
<ul class="list">
<li>Task 7</li>
<li>Task 8</li>
<li>Task 9</li>
<li>Task 10</li>
</ul>
</div>
I am experiencing difficulties in enabling the visibility of a class when I hover over its parent class in CSS. i.e. I want to enable the submenu class on hover effect over the menu class.My html code for this is as follows:
<li class="menu">Link</li>
<ul class="subMenu">
<li>Link A</li>
<li>Link B</li>
<li>Link C</li>
</ul>
And the corresponding css is as follows :
.subMenu
{
display:none;
visibility:hidden;
}
.menu:hover .subMenu
{
display:inherit;
visibility:visible;
}
Now I have difficulties with the hover effect.
You need to add the sub menu ul inside the main li. Currently it is outside the li so it is not visible on hover.
Change your html like this
<ul>
<li class="menu">Link
<ul class="subMenu">
<li>Link A</li>
<li>Link B</li>
<li>Link C</li>
</ul>
</li>
</ul>
DEMO