Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering.

My goal is for the list to start at "1.2.1, 1.2.2, etc."

Please refer to the attached fiddle for reference.

The desired outcome is shown in the following image: https://i.stack.imgur.com/BR9ZI.png

   OL { counter-reset: item; padding-left: 10px; }
   LI { display: block }
   LI:before { content: counters(item, ".") " "; counter-increment: item }
<html>
 <head>
  <style>
   OL { counter-reset: item; padding-left: 10px; }
   LI { display: block }
   LI:before { content: counters(item, ".") " "; counter-increment: item }
  </style>
 </head>
 <body>
 <ol>
  <li>three
  <ol>
   <li>three.one</li>
   <li>three.two
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
      </li>
   </ol>
   </li>  
  </ol>
 </body>
</html>

Thank you!

Answer №1

Try implementing the <ul> tag instead.

 <head>
  <style>
   OL { counter-reset: item; padding-left: 10px; }
   LI { display: block }
   LI:before { content: counters(item, ".") " "; counter-increment: item }
  </style>
 </head>
 <body>
 <ul>
  <li>three
  <ul>
   <li>three.one</li>
   <li>three.two
    <ul>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ul>
      </li>
   </ul>
   </li>  
  </ul>
 </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging JSON data with jQuery's ajax function

Utilizing jQuery to retrieve data from this API () has been a success. I have successfully fetched the main details such as "name", "height", and "mass". However, I am facing a challenge when trying to access the values of "homeworld", "films", "species", ...

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 5 ...

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

What is the reason for the jquery change event failing to fire when the select value is modified using val()?

I'm experiencing a peculiar issue where the logic inside the change() event handler is not triggering when the value is set using val(), but it does work when the user manually selects a value with their mouse. Any idea why this might be happening? & ...

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code: <md-toolbar layout-align="center center"> <h3>Traffic Light Component</h3> </md-toolbar> <md-grid-list md-cols ...

When using percentages in HTML, the height and width of a background picture may not scale correctly

Currently, I am utilizing Webstorm software purely for HTML and CSS without any additional plugins. In my code, there is a <section> element that only has the <html> and tags as its parent elements. This particular section is assigned an ID th ...

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

Center an image and superimpose text in the middle of the webpage

I am attempting to center an image with text overlay in the middle of a page. Although the image is centered correctly, the overlay text remains off-center. Below is the code snippet. The text should be positioned in the top left corner of the image. &l ...

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

I am in search of a specialized 3D camera with a unique effect

I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...

Spinner loading animation not showing correctly

Even though it shows up when I hover over and inspect, the image remains completely invisible. It's saved in the same folder and I believe all the file names are correct, but for some reason, it's just not working as expected. Any help would be g ...

Stop rows from causing the table to stretch in width

We have a unique table structure where the first row contains two cells and the second row contains only one cell. The width of each cell is determined by its content. Our goal is to prevent the cell in the second row from expanding the overall table widt ...

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

The Php Include function is known to create unnecessary whitespace and disregard any specified styles

On one of my web pages, I am using the include() function to bring in content from another page. This external page contains both HTML and PHP code, with echoes for output. Here's an example: The page Apple.php looks like this: <html> <head ...

Automatically switch tabs upon pressing/scanning the Return key (using PHP, MySQL, and JavaScript)

Seeking assistance to resolve an ongoing issue that has been troubling me for the past few weeks. I am maintaining a basic web-based database to keep track of product serial numbers leaving our warehouse. The system is secure behind our firewall, so I&apo ...

Browse through content without displaying the page title on the navigation bar and without the use of frames

When I sign into certain websites, I have noticed that the address displayed is often something like this: https://examplesite.com/access Even though all the links on the landing page are clickable and functional, their corresponding addresses never show ...

Achieve vertical alignment of a span text that spans multiple lines within an inline-block element

I am facing an issue with this code as the phrase "lorem ipsum" is not positioned in the center of its parent div: <div style="width: 500px; height: 500px; background-color: #f0f0f0"> <div style="display: inline-block; width: 100px; height: 1 ...

The link generated through ERB using link_to cannot be clicked on

When using the ERB link_to helper method to generate a hypertext link to an individual article, I am encountering an issue where the link appears as clickable in the view but is not actually clickable (the cursor does not change to a pointer). I have atte ...

Is there a way to get this script running on WordPress?

I'm working with this JavaScript code: $(document).ready(function(){ $("text1").click(function(){ $(this).hide(); }); }); Here's the HTML code: <div class="div1"> <p class="text1">text to appear when the user p ...