<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!
Related
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?
I'm trying to write a valid HTML however this fails:
<ol>
<li>First</li>
<li>Second</li>
<ul>
<li>First of second</li>
</ul>
</ol>
This fails at when generating javadoc. It says:
error: tag not allowed here: <ul>
Desired output should be like that:
First
Second
First of second
Isn't it valid to define ul inside ol?
Wrap the ul in an li, as the only valid children of ul and ol are li.
If you don't want the bullet to show, you can exclude them via a class
HTML:
<ol>
<li>First</li>
<li>Second</li>
<li class="no-bullet">
<ul>
<li>First of second</li>
</ul>
</li>
<li>Third</li>
</ol>
CSS:
.no-bullet {
list-style: none;
}
fiddle
If you don't want to use CSS, either use inline-styles or the type attribute:
<li style="list-style: none;">Item</li>
OR
<li type="none">Item</li>
Place the unordered list ul inside the list item li,
<ol>
<li>First</li>
<li>Second
<ul>
<li>First of second</li>
</ul>
</li>
<li>Third</li>
</ol>
fiddle
I m having a list with ul and li s.
Now I want to apply a css rule to the parents only and not to the children.
For this I'm using the > symbol but that is applied to the children as well.
The example here
The code I used at the css -
#nav > li a {
padding-bottom: 30px;
}
The html being -
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
I think you want to use #nav > li > a which covers a children of the <li>. Otherwise any <a> descendant of the <li> is also selected (which is everything).
As of CSS3, there is no way to select an element based on its children. I think that something like that is coming in CSS4, but I'm not sure.
Small note: the > selector selects only the children, not the parents and the children.
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
I'm new to CSS and working with list. I tried using one of the code I saw on w3schools which shows how to indent lists:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
My css is overriding it so it all apears on the same vertical line. Is there any CSS code I could use locally on the list to override the main css file? Any help would be appreciated.
Yes, simply use something like:
ul {
padding-left: 10px;
}
And it will bump each successive ul by 10 pixels.
Working jsFiddle
It sounds like some of your styles are being reset.
By default in most browsers, uls and ols have margin and padding added to them.
You can override this (and many do) by adding a line to your css like so
ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST
margin:0;
padding:0;
}
In this case, you would remove the element from this list or add a margin/padding back, like so
ul{
margin:1em;
}
Example: http://jsfiddle.net/jasongennaro/vbMbQ/1/
I solved the same problem by adding text-indent to the nested list.
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul id="list2">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
#list2
{
text-indent:50px;
}
Normally, all lists are being displayed vertically anyways. So do you want to display it horizontally?
Anyways, you asked to override the main css file and set some css locally. You cannot do it inside <ul> with style="", that it would apply on the children (<li>).
Closest thing to locally manipulating your list would be:
<style>
li {display: inline-block;}
</style>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
You can use [Adjacent sibling combinators] as described in the W3 CSS Selectors Recommendation1
So you can use a + sign (or even a ~ tilde) apply a padding to the nested ul tag, as you described in your question and you'll get the result you need.
I also think what you want it to override the main css, locally.
You can do this:
<style>
li+ul {padding-left: 20px;}
</style>
This way the inner ul will be nested including the bullets of the li elements.
I wish this was helpful! =)
You can also use html to override the css locally. I was having a similar issue and this worked for me:
<html>
<body>
<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
li {
padding-left: 30px;
}
<p>Some text to show left edge of container.<p>
<ul>
<li>List item</li>
</ul>
The above will add 30px of space between the bullet or number and your text.
li {
margin-left: 30px;
}
<p>Some text to show left edge of container.<p>
<ul>
<li>List item</li>
</ul>
The above will add 30px of space between the bullet or number and the left edge of the container.