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

Uncover hidden content by clicking a button with JavaScript

I need help with creating a function that hides additional content until a button is clicked. Currently, my script displays the content by default. How can I modify it to hide the content by default and only reveal it when the button is clicked? functi ...

Error: The use of import statement is not allowed outside a module in JavaScript due to a Syntax

I'm just beginning my journey with React, starting from scratch without setting up all the necessary dependencies. Initially, I used CDNs in my html file but now I want to learn how to import React and ReactDOM into my local setup and also link CSS fi ...

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

Adjusting the sidebarPanel height to match the mainPanel content in a shiny app

I'm currently developing an app that features a scrollable sidebarPanel alongside a mainPanel that can have varying heights, such as: library(shiny) ui <- fluidPage( headerPanel('Iris k-means clustering'), sidebarPanel(style = " ...

How can we best understand the concept of custom directives using the link method?

As a beginner in AngularJS, I am looking to implement an autocomplete feature for text input. My JSON data is stored in JavaScript and I need help simplifying the process. Can you provide me with a straightforward solution? The specific requirement is to ...

Flex mode allows for responsive row details in ngx-datatable

Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loade ...

What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

I couldn't find an answer to this question through my searches on Google, so I apologize if it's already been asked. I've been working on a web project recently and one thing I noticed is that the fonts appear much bolder in Firefox or Safar ...

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

Is it possible to partially move the image outside of the MUI dialog?

Is it possible to move an image partially outside of the MUI dialog, with the bottom part inside and the top part outside the dialog? I attempted a solution found on Stack Overflow but it did not yield the desired result. This is the dialog code: <Dial ...

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how to a ...

CSS:Tips for removing borders with border-radius in CSS

I have a div that has been styled with a left-hand border, and it's causing me some trouble. You can view the styling here on Jsfiddle. Is there a way to remove just the left hand side border without affecting the rest of the design or creating an un ...

Troubleshooting: Why isn't my Bootstrap glyphicon icon displaying

Has anyone encountered issues with the glyphicon icon not showing up on buttons in Safari or Chrome when using Bootstrap? I tried fixing it but couldn't. Any help would be greatly appreciated! <link href="css/bootstrap.min.css" rel="stylesheet"&g ...

Show different values in Array arranged in Table format with the help of Ajax code

Check out the code I have attempted below: <script type="text/javascript"> $('#doctorselected').on('change', function(e){ console.log(e); var doctorid = e.target.value; var url = '{{URL::to('getdoc ...

Adaptable images - Adjusting image size for various screen dimensions

Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...

Incorporating Bootstrap into a fresh project

I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

Issues with loading an external CSS file in an HTML document

I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as: <link href="css/animation.css" type="text/css" rel="stylesheet"> ...

Difficulty adjusting image size in "layouts with overflowing images on cards."

I have encountered an issue with resizing images on my browser using a card-based layout that I found on codepen. The strange thing is, the image resizing works perfectly fine on codepen itself, but when I try to implement the same HTML and stylesheet on m ...

Positioning a Material UI Menu item underneath its parent element using CSS styling

I have created a Material UI dialog that features some text and an Icon with a dropdown menu option. You can check out the demo here: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js My goal is to properly position the Menu component so that it a ...

Tips for creating a Bootstrap table with a "table-bordered" style, fixed header, and scrollable body

How can I keep the table header fixed while allowing the body to scroll without breaking the table layout? I've tried using the CSS below, but it results in the width of the header columns being different from the width of the body columns. Any sugges ...