I have the following example where the last doesn't seem to work when using :last-child. In my code, you can see when I refer to the last element using the class "aa" it is showing the "+ Add"
&.aa {}
But if I comment out
&.aa{}
and set it to
&:last-child{}
the "+ Add" on the last is not showing up. Am I missing something?
This is because you have a typo in your HTML structure.
So your current structure is like this:
<ul>
<li class="item">
<div>
Tom Hanks
<br /> Jenny Hanks
</div>
</li>
<li class="item active">
<div>
Henry Fonda
<br /> Valarie White
</div>
</li>
<li class="aa">
</li>
<ul>
As we can see you didn't close the ul element properly, so the last child of it will not consider as:
<li class="aa">
</li>
and it will ignore this element as last-child, so &:last-child won't work as expected.
All you need to do is to close your elements properly.
So it should be something like this:
<ul>
<!--> ul inner elements <-->
</ul>
Live demo: codepen.io
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
I've never worked with CSS before (I am a WordPress user). But I think I'm very close, but cannot figure out what I'm doing wrong.
So, I have this list <li> item that I want to hide. I tried using the n'th child, but that did not work, as the order of the list can change depending on if the field is filled or not. So, I need to use a data selector. I tried this:
.atbd_listing_data_list {
li[data-value="Breed : "]
visibility: hidden;}
But that did not work. This is the code where it's coming from:
<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li>Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>
I simply want to hide the Breed and Age Category fields, but I have been trying for a couple of hours now without success.
Anybody wants to teach me some CSS and how to handle this :) ? I think I'm almost there, must be a small error that I'm making.
Kind regards,
Collin
This answer assumes you are not capable of editing the files generating or template of the list.
Well, to be fair, these CSS rules are more "hacking" your way into a result instead of actual fixing a problem. But I can understand where you are coming from. There should be another way to solve the problem without hiding the data.
You are on the right path, :nth-child selectors is great for hiding something for a "static list" (nth-child count from a current point, if this list is shorter, other data will hide instead).
The [data-value="breed"] will only work when <li data-value="breed"> is the element. It's not a "data contains value" kind of selector.
.atbd_listing_data_list ul li:nth-child(3),
.atbd_listing_data_list ul li:nth-child(9) {
display: none;
}
<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li>Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>
You have to add the data attribute to the li you want to hide then select it as shown in example.
li[data-value="hide"] {
display: none;
}
<div class="atbd_listing_data_list">
<ul>
<li>Pedigree: Fly x Hors la loi II x Concorde</li>
<li>Competition height: </li>
<li>Age Category: </li>
<li>Age: 15</li>
<li>Color: </li>
<li>Height: </li>
<li>Studbook: </li>
<li>Gender: </li>
<li data-value="hide">Breed: </li>
<li>
<p><span class="la la-clock-o"></span>October 25, 2020
</p>
</li>
</ul>
</div>
I usually do like this if I want to objects on the same row:
<ul class="list-inline">
<li>
<label>Name:</label>
</li>
<li>
<p>John</p>
</li>
</ul>
The other way I know is to use row and columns. Alot of code for a simple thing. Is there something built in for this?
Something like:
<div class="some-neat-bootstrap-class">
<label>Name:</label>
<p>John</p>
</div>
Can't find any in the docs.
You can display both of those elements inline.
.some-neat-bootstrap-class label,
some-neat-bootstrap-class p {
display:inline;
}
I want to select all li which not contains a tag in css:
ul.sf-menu li:not(a)
But looks like it is not working.
Need help
<ul class="sf-menu sf-js-enabled sf-shadow">
<li>
<a href="/ ">
</li>
<li> need to select this li because it is not contains a href
A
<ul style="visibility: visible; display: block">
<li>
<a href="/B-1">
</li>
<li>
B-2
</li>
</ul>
</li>
<li>
Two things
1) Your selector doesn't match the question you're asking. It currently selects every LI that is not an Anchor. This should be every LI on the page.
2) What you want can't be done with CSS right now. Your best bet would be to use some JavaScript to do this. For instance, the following jQuery would work.
$("ul.sf-menu li:not(:has(a))").doSomething()
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}