Nested Ordered List Numbering Issue - html

I'm making a Table of Contents with nested numeric ordered lists. It starts off well, but once I go back a level the numbering gets off. As you can see once it gets to the 4th level not only is the numbering off, but now everything has one extra number, regardless of level.
This is what I end up with:
SECTION 1
1 Item 1
1.1 Sub Item
1.1.1 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 4 Item
1.1.1.3 Level 4 Item
1.1.1.4 Level 4 Item
1.1.1.5 Level 4 Item
1.1.1.6 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 3 Item
1.1.1.3 Level 3 Item
1.1.2 Level 2 Item
This is the code I'm using:
ol.toc {
counter-reset: item;
}
li.toc {
display: block;
}
li.toc:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<div>
<h2>SECTION 1</h2>
</div>
<div style="float: clear;">
<ol class="toc">
<li class="toc"> Item 1</li>
<ol class="toc">
<li class="toc"> Sub Item</li>
<ol class="toc">
<li class="toc"> Level 3 Item</li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
</ol>
<li class="toc"> Level 3 Item</li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
</ol>
<li class="toc"> Level 3 Item</li>
<li class="toc"> Level 3 Item</li>
</ol>
<li class="toc"> Level 2</li>
</ol>
</ol>
</div>
</body>
</html>
Not sure what's going on. I haven't found too many examples that fit my needs.
I appreciate any help!


I think the wrong numbering is happening because you should wrap every child <ol> in it's parent <li>. And for better look set list-style-type:none; of the top most parent <ol>.
Check it out:
ol.toc {
counter-reset: item;
}
li.toc {
display: block;
}
li.toc:before {
content: counters(item, ".") " ";
counter-increment: item;
}
.outer li {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<div>
<h2>SECTION 1</h2>
</div>
<div style="float: clear;">
<ol class="toc outer">
<li class="toc"> Item 1</li>
<ol class="toc">
<li class="toc"> Sub Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
</ol>
</li>
<li class="toc"> Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
</ol>
</li>
<li class="toc"> Level 3 Item</li>
<li class="toc"> Level 3 Item</li>
</ol>
</li>
<li class="toc"> Level 2</li>
</ol>
</ol>
</div>
</body>
</html>

Related

Nested list alignment issues

I have a dropdown menu (full-width) on my dropdown, I have a nested list and I want each column to have equal height and width. I tried to add a container inside each column and put display: table-cell; but it seemed my code isn't working at all. can ya'll help me with this?
<div class="column">
<div class="col-container">
<ul id="sub-list">
<li class="sub-list-item">
<a class="sub-list-title">창업 프로세스</a>
</li>
<li class="nested-child">
<ul class="sub-sub-list">
<li class="item"><a class="sub-sub-title">경진대회정보</a></li>
<li class="item"><a class="sub-sub-title">명예의 전당</a></li>
</ul>
</li>
<li class="sub-list-item">
<a class="sub-list-title">행사 네트워크</a>
</li>
</ul>
</div>
</div>
snippet from style.scss
.column{
float: left;
margin: 0;
display: table;
.col-container{
display: table-cell;
background: yellow;
padding: 21px;
}
}
I'll provide a photo of what the output should be like.
This is made using nested UL. how do we achieve this one?

You can change the flex-basis value to adjust the number of columns you want to dislplay, hope you have got the solution looking for.
Refer flexbox:
ul,
li {
margin: 0;
padding: 0;
}
.list-item-main {
display: flex;
flex-wrap: wrap;
}
.list-item-main>.list-item {
list-style: none;
flex-basis: 33%;
box-sizing: border-box;
padding: 15px;
}
.list-item-main>.list-item .nested-ul>li {
list-style: none;
box-sizing: border-box;
padding: 0 15px;
}
.list-item-main .list-item-head {
background: gold;
}
<div class="list-container">
<ul class="list-item-main">
<li class="list-item">
<a>Single List item</a>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
</ul>
</li>
</ul>
</div>

How to reset ordered list numbering in CSS

How can I reset the numbering for nested ordered lists.
Running this snippet, give me an output like this:
List 1
List 2
List 3
List 1
List 2
List 3
List 1
List 2
List 3
3.1. List 1
3.2. List 2
3.3. List 3
3.3.1. List 1
3.3.2. List 2
3.3.3. List 3
3.3.3.1. List 1
3.3.3.2. List 2
3.3.3.3. List 3
I want 3.1 to start with 1. How can I do this?
Do I need to use multiple counters? or a single one will do?
I'm not really used in using css counters.
The code works if it's a series of nested ordered list but when there is an unordered list inside it starts to fail. It still continues the numbering from the previous ordered list.
ol {
counter-reset: item 0;
list-style: none;
}
ul {
counter-reset: item "";
}
ul:first-child>li {
counter-reset: item "";
}
ul>li:before {
content: " ";
margin-right: 1em;
}
ol ul li:last-child {
counter-reset: item "";
}
ol>li:before {
counter-increment: item;
content: counters(item, ".")". ";
}
<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Edit: I wasn't still able to do this, even with multiple reset counter. Is there any hope for this?

You can view my case:
We just need to reset at the first child
.tos ol > li {
counter-increment: listNumbering;
list-style: none;
}
.tos ol > li:before {
content: counter(listNumbering) '. ';
}
.tos ol > li:first-child {
counter-reset: listNumbering;
}

What you want is a new, different, counter to start when the ol is within an ul within an ol:
ol {
counter-reset: item 0;
list-style: none;
}
ol>li:before {
counter-increment: item;
content: counters(item, ".")". ";
}
ol ul ol {
counter-reset: subitem 0;
}
ol ul ol>li:before {
counter-increment: subitem;
content: counters(subitem, ".")". ";
}
<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
<li class="li">List 2</li>
<li class="li">List 3
<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">Sub List 1</li>
<li class="li">List 2
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
</ol>
</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>

According to w3 document, you can directly define value prop to implement it.
<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

Select all siblings if one of them has a specific class [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
RE: above regarding duplicate - my question asks if there was a way to select ALL elements inside of a child where one class exists in pure CSS whereas that linked question is just asking if there is an opposite of the + selector which is not what I was asking/looking for. This should be untagged as duplicate.
Main Question:
I want to select all elements inside a parent if one of the siblings has a specific class. How do I do this? I tried:
https://www.w3schools.com/cssref/sel_gen_sibling.asp
The element1~element2 selector matches occurrences of element2 that
are preceded by element1.
But it's not what I want.
CSS sibling selectors (select all siblings)
My question is not a duplicate as the class is in the first element in above question comes first which makes it work.
See below:
.red ~ .item {
background-color: red;
}
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>
<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>
How do you select all siblings if one of them has a class in pure CSS? Or do I need to use JS?

Use jQuery to get the siblings and then apply the red class to them.
$( "li.item.red" ).siblings().addClass("red");
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>
<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>

For this particular case and if you want to apply background to all your elements, you can consider a pseudo element that will cover all of them as your background layer:
ul {
position: relative;
z-index: 0;
}
.red:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 40px;
right: 0;
bottom: 0;
background-color: red;
}
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
</ul>
<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
</ul>

HTML ul type disks come out as squares

I'm really new to HTML and I have some problems with displaying lists. Here is my code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>Preceding Text</p>
<ol type="I">
<li>
List Item 1
<ol type="a">
<li>Nested Item 1.1</li>
<li>Nested Item 1.2</li>
</ol>
</li>
<li>
List Item 2
<ol type ="1">
<li>Nested Item 2.1</li>
<li>Nested Item 2.2
<ul typeof ="disc">
<li>Nested Item 2.2.1</li>
<li>Nested Item 2.2.2</li>
</ul>
</li>
<li>Nested Item 2.2.3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</body>
</html>
The problem is with the "disc" part. Instead of discs chrome displays bullets as squares. Please help ?

You code is wrong this line <ul typeof ="disc"> to update this new <ul type ="disc">
check this fiddle
HTML
Preceding Text
<ol type="I">
<li>
List Item 1
<ol type="a">
<li>Nested Item 1.1</li>
<li>Nested Item 1.2</li>
</ol>
</li>
<li>
List Item 2
<ol type ="1">
<li>Nested Item 2.1</li>
<li>Nested Item 2.2
<ul type ="disc">
<li>Nested Item 2.2.1</li>
<li>Nested Item 2.2.2</li>
</ul>
</li>
<li>Nested Item 2.2.3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>

use list-style-type: disc on the li element

Three level CSS menu with first layer in horizontal layout

What I'm after is to have the top level ul lis laid out horizontally, and then subsequent levels laid out vertically, preferably indented slightly as levels go down, under their parent li.
Not after any hover functionality, just a nice layout, something like this:
Top Item 1 Top Item 2 Top Item 3
sub item 1 sub item 1 sub item 1
sub item 2 sub item 2 sub item 2
sub sub item 1 sub item 3 sub item 3
sub sub item 2 sub item 4 sub item 4
sub item 5 sub item 5 sub item 5

How about this:
Live Demo
CSS:
#footer {
overflow: auto;
background: #ddd
}
.outer {
list-style: none;
width: 33%;
float: left;
margin: 0;
padding: 0
}
.first {
font-weight: bold
}
.outer ul {
list-style: none;
margin: 0;
padding: 0 0 0 18px
}
HTML:
<div id="footer">
<ul class="outer">
<li class="first">Top Item 1</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 3</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
</div>

here is a copy-paste stuff to play with:
<html>
<head>
<style>
li.level1 { float: left; display: inline; margin-right: 20px }
ul.level2 { display: inline }
li.level2 { display: block; padding-left: 20px }
ul.level3 { display: inline }
li.level3 { display: block; padding-left: 20px }
</style>
</head>
<body>
<ul class="level1">
<li class="level1">apple</li>
<li class="level1">banana
<ul class="level2">
<li class="level2">banana 1
<ul class="level3">
<li class="level3">banana 1 A</li>
<li class="level3">banana 1 B</li>
</ul>
</li>
<li class="level2">banana 2</li>
</ul>
</li>
<li class="level1">cherry
<ul class="level2">
<li class="level2">cherry 1</li>
<li class="level2">cherry 2</li>
</ul>
</li>
<li class="level1">dddd</li>
</ul>
</body>
</html>

Or if you want something pure css then how about something like this:
http://jsfiddle.net/pLFqd/2/
Edit: Missed the bit about not wanting hover functionality, try simple example attached