Is it possible to change the css to show a box only if there are more than 2 children?
Example:
// Don't show
<ul>
<li>Something</li>
</ul>
// Show
<ul>
<li>Something</li>
<li>Something</li>
</ul>
I'm trying to do it with CSS only. Is it possible?
You can use the :only-child selector and hide the li if it's the only one.
ul li:only-child{
display: none;
}
ul li:only-child {
display: none;
}
<ul>
<li>Don't Display</li>
</ul>
<ul>
<li>Display</li>
<li>Display</li>
</ul>
https://jsfiddle.net/90kx009u/
Here's the JS if you wanted to accomplish exactly what you're asking:
let thelist = document.querySelector('.thelist')
if(thelist.childElementCount <= 1){
thelist.remove()
}
https://jsfiddle.net/90kx009u/2/
You can't directly 'count' total numbers of elements in CSS, so there's no way to only apply the class if there's 2 or more divs (you'd need JavaScript for that)
See more here: How to add CSS if element has more than one child?
Related
When I put 2 li tags I can't have them appear on the same line when you look at my website. What can I do?
Use the CSS declaration "display: inline".
Lets suppose you have two lists:
Name the lists by class, this case: list-1 and list-2
//HTML
<ul class="list-1">
<li>Here</li>
<li>There</li>
</ul>
<ul class="list-2">
<li>Sand</li>
<li>Rope</li>
</ul>
In the css part, declare display: inline-block
//CSS
.list-1, .list-2
{
display: inline-block;
}
li:after{ content:"\00b6"; }
<ol>
<li>banana</li>
<li>orange</li>
<li class="last-class">apple</li>
</ol>
I working on a dynamic list (the no of <li> tags are varying on time ).I need to be remove the html unicode content from the last element.the last element have a class(here it is "last-class").Is it possible to do with css?
Note : I know it's possible with different fonts.I did not use that here.
You can use the :not pseudo-class to add the pseudo-element only to elements other than the last child.
li:not(:last-child):after {
content: "\00b6";
}
<ol>
<li>banana</li>
<li>orange</li>
<li class="last-class">apple</li>
</ol>
As you've indicated that you only need to remove it from the last element, the class is not really required but you can do it with the class also like in the below snippet:
li:not(.last-class):after {
content: "\00b6";
}
<ol>
<li>banana</li>
<li>orange</li>
<li class="last-class">apple</li>
</ol>
li:last-child:after {content: "";}
This one your are looking for? Add this also to your css
I'd like to create a list where each successive element has a greater margin than the previous one.
You can see what I want to achieve here: Example with fixed margin
So, let's take a simple list
<ul>
<li class="a">First element</li>
<li class="b">Second element</li>
<li class="c">Third element</li>
</ul>
I could give each element a class and set an increased margin to each class, like this
.a {
margin-left: 10px;
}
.b {
margin-left: 20px;
}
.c {
margin-left: 30px;
}
I'd like to be able to do that, however, without specifying directly the margin for each element, using instead a fixed increment that is automatically applied to each additional list element
Is there any intelligent way to achieve this with css?
Obvious answer first, this is what heirarchy is for, so most will recommend using nested uls:
<ul>
<li>001
<ul>
<li>002
<ul>
<li>003</li>
</ul>
</li>
</ul>
</li>
</ul>
Otherwise, I think you will have to turn to using JS or CSS calc if it has enough support for your needs.
I have an html list like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
How can I hide a li item and make it not occupy any space? Let's say, I need the first li item (coffee) to be invisible, so the result will contain only Tea and Milk. I used css (or style="visibility: hidden"), but it still occupies some space.
=======
Note: the first li is just some template used to create the other li items. The template li is generated during the run time, and that's why I need to hide it. I remove it eventually after generating the other li items (Tea and Milk), but before I generate Tea and Milk, Coffee is still visible.
============
Thanks. Answer is style="display:none"
Create a class and apply it to elements which you wish to hide. You can do it when you generate markup or add the class to each element using a selector, like jquery
.hide{
display:none;
}
<ul>
<li class="hide">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
In css you want (or some similar selector)
ul > li:first { display: none; }
Or if you prefer directly placing the css definition on the element itself
<ul>
<li style="display:none;">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Another common practice is to simply create a style applied by a class if you wish to apply this style
<style> .nodisplay { display: none; } </style>
<ul>
<li class="nodisplay">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Using display:none; will remove the element from the flow of the page, and as a result there will be no blank space as can occur when using visibility: hidden;
"Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
To render an element box's dimensions, yet have its contents be invisible, see the visibility property." display: none MDN
Use display:none; instead.
That makes the element disappear and not take up any space.
You could style it.
...
<li style="display:none;">
....
That should hide the element
Just write this:
<ul class="groceries">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
.groceries {
list-style: none;
}
There are two ways you can achieve this. The first one is to use CSS display property :
Sample.html
<ul>
<li class="list-hidden-item">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Sample.css
.list-hidden-item { display: none; }
Another is to use HTML5 attribute hidden
Sample.html
<ul>
<li hidden>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li>This
<li>and this</li>
</li>
</ul>
I try to select the second <li> by doing:
li li {
background: "red";
}
Why doesn't it work?
You are missing one ul... And the document is not valid HTML5. Try this one (this is a proper way of nesting lists):
<ul>
<li>This
<ul>
<li>and this</li>
</ul>
</li>
</ul>
Then in CSS:
ul li ul li {
background: "red";
}
More to read here: Proper way to make HTML nested list?
Best regards, hope it helps!