Hello everyone! I am looking to create a mixed multilevel list in CSS, similar to the one shown in this image: image description here. I have attempted the following code snippet, but it seems to apply the counter to unordered lists:
ol {
counter-reset: section;
list-style-type: none;
}
ol li:before {
counter-increment: section;
content: counters(section, ".") " ";
}
You may implement a counting technique
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}<ol>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
<li></li>
</ol>To create an intricate multi-level list using HTML and CSS, one can utilize nested ul (unordered list) and li (list item) elements. This hierarchical structure accurately represents the chapters and titles. Here is a sample implementation:
<!DOCTYPE html>
<html>
<head>
<title>Multi-Level List Example</title>
<style>
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.chapter-list {
counter-reset: chapter;
}
.chapter-list>li:before {
counter-increment: chapter;
content: counter(chapter) ". ";
}
.title-list {
counter-reset: title;
margin-left: 20px;
}
.title-list>li:before {
counter-increment: title;
content: counter(chapter) "." counter(title) " ";
}
.sub-title-list {
counter-reset: sub-title;
margin-left: 40px;
}
.sub-title-list>li:before {
counter-increment: sub-title;
content: counter(chapter) "." counter(title) "." counter(sub-title) " ";
}
</style>
</head>
<body>
<ul class="chapter-list">
<li>Chapter 1</li>
<li>Chapter 2
<ul class="title-list">
<li>Title 1</li>
<li>Title 2
<ul class="sub-title-list">
<li>Sub 1</li>
</ul>
</li>
</ul>
</li>
<li>Chapter 3</li>
</ul>
</body>
</html>
Is there a way to store the value of a week input in a variable and then display it in a span? I attempted the following code: <input type="week" name="week" id="week-selector"> <span id="kalenderwoche"> ...
My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...
Hello there, I am in the process of creating a website and have implemented an autocomplete field. However, I am facing an issue due to having over 1000 <li> elements within the <ul>, making it slow especially on mobile devices. I would like t ...
I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...
Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...
Seeking assistance with creating buttons to control a remote light's ON and OFF states while reflecting their status as well. The specific http API calls for the light are necessary to toggle its state. Turn On = http://192.168.102.22:3480/data_requ ...
I successfully added a node, but I forgot to include the hover function of the node in my application. The hover function is not necessary, and I need it to work with ie8 compatibility. Here's my HTML: <div id="appendCell" style="color:green; colo ...
Can the HTML5 element's color be modified using CSS as opposed to JS? I am looking to personalize qTips tooltip pointers with specific LESS CSS instructions that cannot be referenced through jQuery. ...
My goal is to change the color of each div individually when clicked. However, I am facing an issue where all divs change color at once when only one is clicked. I need help in modifying my code to achieve the desired behavior. Below is the current implem ...
What is the best way to ensure that my Footer spans the full width of the browser window? Note: My website uses Bootstrap, with the Footer utilizing 'container-fluid' while the page content utilizes 'container'. Live link: HTML < ...
I am curious about how I can determine the number of children nested within parent-child relationships. For example: const parent = document.querySelectorAll('.parent'); parent.forEach(el => { const ul = el.querySelector('.child3-chi ...
How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...
I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...
I have been attempting to modify the background of the list item labeled as home in order to ensure that it displays hover properties even when not being interacted with. Despite specifying this in the class, the appearance does not change. Below is the H ...
Below is the HTML code for my form: <div style="display:block; margin:0 auto;"> <h2>Welcome</h2> </div> <div id="box"> <div id="box2"> <p id="pid"><b>Em ...
Is it possible to utilize the input text value assigned to name='t0' within the same HTML document? Here's the code snippet you can refer to - <!DOCTYPE html> <head> <link rel="stylesheet" href="https://sta ...
I'm new to CSS and I'm trying to incorporate an animated GIF as a smartphone screen using Bootstrap to ensure responsiveness. I've managed to get it working for larger and medium screens, but the issue arises when resizing for smaller displa ...
I am in need of some assistance from you all. The issue I am facing involves dealing with a string of HTML that looks like this: <h4>Some title here</h4> <p>Lorem ipsum dolor</p> (some other HTML here) <h4>Some other title ...
Currently, this is what I have: $(document).ready(function() { $.ajax({ type:"GET" , url:'{{url("/api/getcart")}}' , dataType:"json", success: function(data){ $('#price').append(data.cartitems[1].product.pr ...
Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...