I want to create css to generate the following nested list.
1. item1
subitem
subitem
2. item2
subitem
subitem
What I want is to modify the numbers (either bold or red). I searched in the internet but what I found was css for an ordered list. When I create a nested list with that css, what I obtain is extra numbers in place of the bullets. Can someone help?
You can use CSS counter only on li's that are direct children of ol with this HTML structure and then change color and font-weight.
ol {
list-style: none;
counter-reset: ol-counter;
}
ol > li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ". ";
color: red;
font-weight: bold;
}
<ol>
<li>item1
<ul>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
<li>item2
<ul>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
</ol>
Related
I know that greater than (>) sign/slector will select exact child and not nested one
but in this example all <li> getting black BG
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
CSS:
#content > ul li {
background: black;
color: white;
}
as per rule black BG shouldn't be for Sub list item but here its applied to all <li> (should be just for List Item With)
http://jsfiddle.net/4j1zv25b/
Your current code selects any li within the first level ul. The child list li tags are still descendants of the first ul so get styled. You need to also use select the direct descendant of the ul:
#content > ul > li {
background: black;
color: white;
}
However, you also have the issue that all child lists are inside of that styled li. The child elements don't have a background or color set so the background is transparent and the color is inherited. You need to apply a new background and color to override those styles.
#content>ul>li {
background: black;
color: white;
}
#content li li {
background: white;
color: black;
}
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
The behaviour you've described is correct, because your asking the direct ul child of #content, to style it's Li's with that behaviour.
Just because you've given that Li some children, does not negate its effects. Because the children are within the scope of the original targeted Li, they will be styled according to their parent.
I've attached a potential variant that you may be looking for, which should style just the first li within the sub categories.
I've also attached another example, which might better illustrate my point. Imagine a Div, with another Div inside of it, and inside the child div, there is a paragraph tag.
If you style the direct child of the first div, you would expect the paragraph tag to still have a black background, because it's parent is the targeted div. The p doesn't apply opposite styling to compensate, because why would it?
#content>ul li {
background: black;
color: white;
}
#desired>ul li ul li:first-child {
background: black;
color: white;
}
#example > div {
background: black;
color: white;
}
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div id="desired">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div id="example">
<div>
<p>Still styled</p>
</div>
</div>
The greater than symbol (>) selects the direct child of the parent but grandchildren will still inherit from it.
To select the garndchild you would need ul li ul li or ul > li > ul > li
You can also use child selectors like:
:first-child
:nth-child(n)
:last-child
See more about CSS selectors here https://www.w3schools.com/cssref/css_selectors.asp
why dont you select the inner list items also
#content > ul li {background: black;
color: white;}
#content > ul li li {
background: white;
color: black;
}
According to this well-rated SO post Proper way to make HTML nested list? the best-practice way to make a nested list is this:
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li> </ul>
however I'm having real problems styling a list made in this way. I want each item in the list to have a specific height but I can't use li { height: 40px; } because the height of the second li also includes all the inner list. See here for an example http://jsfiddle.net/rujg3zyk.
The problem comes down to the fact that the second outer li element contains both some plain text and a block display element. This seems like a 'code smell' to me.
what's the best way of formatting this list so that each line is 40px high?
Apply line-height instead of height
ul li {
background-color:yellow;
line-height:40px;
}
ul li li {
background-color:red;
line-height:40px;
}
height:40px will apply 40px for all the listed items, so that two clild 'li' wont fit inside the 40px of the parent 'li'
The way you have given here, is not a valid syntax:
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<!-- Problem here... -->
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
You cannot nest <ul> directly under <ul> in this case. You need to do is:
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
And the above code is perfectly valid. You don't need to use a height but try using min-height. I strongly advice you against using height (as that has to be calculated by the contents).
Your code
Your code :
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
is correct you need some changes read below:
The nested list should be inside a <li> element of the list in which it is nested.
Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.
Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.
The description list (HTML5 dl) is similar, but allows both dt and dd elements.
More Notes:
dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).
I don't know if this is what you are looking for, but you could use min-height instead of height:
ul li {
background-color:yellow;
min-height: 40px;
}
ul li li {
background-color:red;
}
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
Of course, it could expand to higher heights if there is more content, so that is why I am not sure if that is what you are looking for.
Hope this helps.
hi and thanks for checking.
i have a list, that has multiple nestings. i'd like to change the order of these two lists and i wonder if this is possible with only css?
List item 1
List item 2
List item 2.1
List item 2.2
List item 3
i'd like to change the order to:
List item 1
List item 2
List item 3
List item 2.1
List item 2.2
since the length of the list is dynamic, i can't use absolute positioning or stuff like that.
No, you cannot. you must order that data where it is rendered, at client side (javascript) or back side; css is helpless in this case
Its a tricky one, but you can do it in a way by using CSS Flexbox order property.
You need to change the properties of <ul> and <li> elements. Have a look at the code snippet below.
body {
padding: 2em;
}
/* Resetting properties of <ul> */
ul {
padding: 0;
margin: 0;
list-style: disc;
}
/* Applying Flex properties to <ul> */
ul.normal-list {
display: flex;
flex-direction: column;
}
/* Changing the order of all the <li>s except the <ul> with the class 'nested-list' */
li.nested-list {
order: 1;
}
<ul class="normal-list">
<li>List Item 1</li>
<li>List Item 2</li>
<li class="nested-list">
<ul>
<li>List Item 2.1</li>
<li>List Item 2.2</li>
</ul>
</li>
<li>List Item 3</li>
<li class="nested-list">
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
</ul>
</li>
<li>List Item 4</li>
</ul>
I want to make my drop down menu stay when user clicks on element. Currently, it displays when user hover over element, like this:
div.nav ul li:hover ul {
display: list-item;
position: absolute;
}
I can change hover selector to active but that will not make the drop-down list stay upon click (releasing click will hide it).
My question is, is it possible to have the drop down stay upon click without javascript?
Yes, this is perfectly possible- you can determine visibility of a sibling list from the checked state of a hidden input:
Option 1, :checked
li,
input:checked + ul {
display: block
}
ul ul,
input {
display: none;
}
<ul>
<li>
<label for="menuTrigger">Item</label>
<input id="menuTrigger" type="checkbox" />
<ul>
<li>Sub item</li>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
Option 2, :target
Or alternatively, using the :target pseudo, although depending on your architecture, this may not place nicely with route configuration. Additionally, the list cannot be toggled once shown (except if an alternate :target is initiated).
li,
ul:target {
display: block
}
ul ul,
input {
display: none;
}
<ul>
<li>
Item
<ul id="show">
<li>Sub item</li>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
got a nested LI menu - what I want to be able to do is show all child ULs when any parent LI is hovered over. Ideally in just CSS? but jQuery is OK if not poss in CSS.
Menu code is:
<ul>
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
So for example - when Item 1 is hovered over - the submenu ULs for Item 1 AND Item 2 should show... easy? I cant seem to work it out.... :(
Under your current requirements, that the hover of the <li> should show the <ul> child elements of all sibling <li> elements this isn't possible without JavaScript (with or without a library, as CSS lacks the ability to select elements appearing previously in the DOM, including both ancestor-elements and previous siblings); however if you're willing to allow for the hover to take place on the parent <ul> element this becomes possible with simple CSS:
ul > li {
display: list-item;
}
li > ul {
display: none;
}
ul:hover > li > ul {
display: block;
}
JS Fiddle demo.
In the above the use of the child combinator (>) means this will show only the first level of <ul> elements, if that last rule is amended then all <ul> children can be shown:
ul:hover > li ul {
display: block;
}
JS Fiddle demo.