Is it possible to maintain consistent numbering for ordered lists using only CSS, even when the lists are separate from each other?

Example: https://jsfiddle.net/jacobgoh101/uqrkaodc/3/

<ol>
  <li>a</li>
</ol>
<ul>
  <li>b</li>
</ul>
<ol>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

ol li {
  counter-increment: list-0;
  list-style: none;
}

ol li:before {
  content: counter(list-0, decimal) '. ';
}

current result

1 a
• b
1 c
2 d
3 e

Looking for a solution like the one below:

desired result

1 a
• b
2 c
3 d
4 e

(Context: Experimenting with nesting lists in QuillJS. https://github.com/quilljs/quill/issues/979)

UPDATE:

Because of limitations in the QuillJS library, it's not possible to add start="2" to the ol or modify the HTML structure.

A pure CSS solution is needed, if feasible.

htmlcsscss-counter

Answer №1

ol {
  list-style-type: none;
  /* Customized list style */
}

ol > li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

ol:first-of-type {
  counter-reset: mycounter;
}
<ol>
  <li>a</li>
</ol>
<ul>
  <li>b</li>
</ul>
<ol>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

Answer №2

To streamline the OL/UL elements, you can group them under a shared parent element. By doing this, you will be able to restart the counter for that parent element and only increment it for the ol li:

div {
  counter-reset: list-0;
}

ol li {
  counter-increment: list-0;
  list-style: none;
}

ol li:before {
  content: counter(list-0, decimal) '. ';
}
<div>
  <ol>
    <li>a</li>
  </ol>
  <ul>
    <li>b</li>
  </ul>
  <ol>
    <li>c</li>
    <li>d</li>
    <li>e</li>
  </ol>
</div>

Answer №3

It appears that utilizing the <ol start="2'> tag would be a suitable solution

https://www.w3schools.com/tags/att_ol_start.asp

However, it is puzzling why you encountered difficulties nesting an unordered list within your original ordered list

<ol>
  <li>a</li>
  <ul>
    <li>b</li>
  </ul>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

Answer №4

Enhance your browsing experience by customizing the start of your counters through CSS counter-set. Check out this example of nested counters that includes UL lists and a custom start for nested lists.

https://jsfiddle.net/atorn/fqb8oz6g/

...
ol {
  counter-reset: l;
  &> li {
    counter-increment: l;
    display: -ms-grid;
    display: flow-root;
    position: relative;
  }
  &>li::before { // counters with numbered lists
    content: counters(l, '.') ')';
    position: absolute;
    z-index: 104;
    top: 0;
    left: -0.625em;
    width: 1.7em;
...
    background-color: #e0e5e6;
  }
  ol >li::before { // more wide field for Level 3 indexes
    z-index: 103;
    width: 2.2em;
    margin-left: -0.7em;
    padding-left: 0.4em;
  }
}
.o0>ol {counter-set: l -1}
.o1>ol {counter-set: l 0}
.o2>ol {counter-set: l 1}
.o3>ol {counter-set: l 2}
.o4>ol {counter-set: l 3}
.o5>ol {counter-set: l 4}
.o6>ol {counter-set: l 5}
...

https://caniuse.com/?search=counter-set - Learn about browser support for CSS property: counter-set (Note: Safari 14.x does not support custom beginning of counters currently).

See how ordered lists with CSS property counter-set look in Chrome here

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

Move a single <div> element according to the screen resolution

I'm a beginner in coding and struggling with a specific problem. I need to adjust the position of a container based on screen size. For large and mid-sized screens, the container needs to be left-justified with a small amount of padding from the left ...

htmlcssbootstrap-5

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

update 3: After thorough debugging, I finally found the solution and it has been provided below. let values = { "sportsEntitties": [{ "sportsEntityId": 30085585, "sportsEntityName": "490349903434903490", "sportsEntityStartDate": "7878 ...

javascripthtmlarraysjsonreactjs

Need help using JQuery to set the focus on the initial <select> element on a webpage?

Upon loading the page, I am looking to set focus on the initial element through JQuery. So far, I have managed to achieve this by using: $(":input:visible:first").focus(); or $(':input:enabled:visible:first').focus(); as described in a helpf ...

jqueryhtml

What is the most effective way to retrieve the count of users who have logged in within the past three months by utilizing Jquery

I am seeking to retrieve the count of users who have logged in the last three months utilizing a JSON API and Jquery. This is my current progress: $.getJSON('users.json', function(data) { var numberOfUserLogged = 0; var d1 = ...

javascriptjqueryjsonhtml

Set the default value for a form control in a select dropdown using Angular

I've been struggling to figure out how to mark an option as selected in my select element, but I haven't had any luck. I've tried multiple solutions from the internet, but none of them seem to be working for me. Does anyone out there have ...

htmlangulartypescript

Responsive CSS Dropdown Menu - Divided into Two Columns

After searching for solutions in the support resources and experimenting with various techniques, I am struggling to divide this CSS Dropdown menu into two columns. The nav list is long enough that it extends below the fold. Although the menu adapts respo ...

jqueryhtmlcssdrop-down-menuresponsive-design

Adjust the height of a div to match the tallest element in the same row using jQuery and Javascript

I need to display multiple rows of products, each row containing 4 products. The code snippet below shows an example with only 1 product. To create a row with 4 products, the code for <div class='col-xs-6 col-sm-3 col-md-3'> needs to be rep ...

javascriptjqueryhtmlcss

Challenge in creating a responsive layout using Bootstrap framework

I'm working with Bootstrap, but I'm struggling to achieve the desired layout. My goal is to have the design adapt like this on different screen sizes: ---------------------- Headline | | | image | ----------| | B ...

csstwitter-bootstrap

Employ the JQuery Datepicker functionality to enhance the user experience

Is it possible to integrate jQuery Datepicker into a web page that includes an iframe? And where is the optimal placement for linking the CSS and script references? ...

jqueryhtmljquery-ui

An unexpected page transition occurs when attempting to delete a link

I've successfully created an HTML table that dynamically adds rows and provides an option to delete the current row. Each row represents data retrieved from MongoDB, and upon clicking the delete button, I aim to delete the corresponding item from the ...

javascriptjqueryhtmlnode.jsexpress

The Javascript function call from the <img src="myFunction()"> is malfunctioning

I am looking to dynamically pass the URL of an image using a JavaScript function. <head> <script> function myFunction() { var str1 = "somepictureurl.png"; return str1; } </script> </head> <body> <img src="myFu ...

javascripthtmljsp

Adjust the alignment and size of the flexible image to be centered horizontally

I have an image with dimensions of 3051 x 1716 pixels. https://i.sstatic.net/Y3Wi7m.jpg While viewing it on mobile, I would like to adjust it to look like this without cropping the image or uploading it again: https://i.sstatic.net/lJ1NSm.jpg In other ...

htmlcss

Why might a responsive website automatically switch to mobile view?

My website has a responsive grid system that utilizes media queries with breakpoints. However, I am encountering an issue on IE8 where the "mobile version" of the site is being displayed as the default view even when the screen size is set to what should b ...

internet-explorercssresponsive-designmedia-queries

Centered perfectly in a bootstrap card

I'm struggling to create a bootstrap card with a logo perfectly centered, but the logo seems fixed at the top. How can I fix this issue? <div class="col-xl-3 col-md-6"> <div class="card mini-stat"> <div class="card-body tex ...

htmlcssbootstrap-4

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...

csshtmlcss-selectors

What are the acceptable ID attribute values to use with JQuery selectors?

Can you tell me what the acceptable values are for the ID attribute in HTML elements when utilizing JQuery selectors? Is JQuery conforming to HTML4 or HTML5 rules regarding the ID attribute? ...

jqueryhtmljquery-selectorshtml4

What is causing my animation to jump when using the Web Animation API reverse() function?

I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump arou ...

javascriptcssweb-animations

Changing the background color using ReactJS

After streamlining my project to focus on the main issue, I am still facing a problem. Here is the relevant code snippet: .App{ background-color: aqua; } .AboutMe{ color:blue; background-color: yellow; } This is from App.js: import logo from '. ...

htmlcssreactjs

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

cssresponsive-designless

Navigating to different sections of a single page using Bootstrap

I'm feeling a bit lost when it comes to understanding how linking to an element within a page functions. As I delve into the starter template for Twitter Bootstrap, I encounter the following code snippet in the navbar: <ul class="nav navbar-nav"&g ...

htmlcsstwitter-bootstraptwitter-bootstrap-3