Unable to use the ordered tag correctly in typing

Please review the HTML and CSS Code provided below:

HTML :

<ol>
      <li>Test</li>
      <li>
        <ol>
          <li>Sub-Chapter</li>
          <li>Sub-Chapter</li>
        </ol>
      </li>

      <li>Chapter II</li>

      <li> Checking Type A
        <ol type = "A">
          <li>New Sub-Chapter</li>
          <li>New Sub-Chapter</li>
        </ol>
        </li>  


    </ol>

    <ol>
      <li>A New List</li>

    </ol>

CSS :

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, "."); counter-increment: item }

Why is it that the numbers A and B are not appearing for the New Sub Chapter, only 4.1 and 4.2?

View my JSFiddle

htmlcss

Answer №1

If you want to add your HTML and CSS file, here is the correct method.You can also refer to it on JSFIDDLE.

ol {
  counter-reset: item
}
.list {
  display: block
}
.list:before {
  content: counters(item, ".");
  counter-increment: item
}
<ol>
  <li class="list">Test</li>
  <li class="list">
    <ol>
      <li class="list" >Sub-Chapter</li>
      <li class="list" >Sub-Chapter</li>
    </ol>
  </li>

  <li>Chapter II</li>

  <li>Checking Type A
    <ol type="A">
      <li>New Sub-Chapter</li>
      <li>New Sub-Chapter</li>
    </ol>
  </li>


</ol>

<ol>
  <li>A New List</li>

</ol>

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

When I trigger a function by clicking, I also set a timeout of 1 second. Is it possible to deactivate this timeout from within the function itself?

One button triggers a function with a timeout that repeats itself upon clicking. Here's the code snippet: function chooseNum() { let timeout = setTimeout(chooseNum, 1000); } To disable this repeating function, I attempted another function like so ...

javascripthtml

An error occurred: [object Object] does not support the 'popup' method

I've been attempting to close the jQuery popup by using $('#partsPopup').popup("close"); However, I encountered an error stating that there is no method called "popup". Below is the sequence of scripts that I have followed. Any assistance wo ...

jquerycssjquery-mobile-popup

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

htmlcss

Fixing inconsistent font sizes across various browsers

During the development of my website, I couldn't help but notice a significant variance in font sizes between Internet Explorer and other browsers. Here's an example of what my page looks like: I intended for it to resemble the first and second ...

htmlcss

How come my gifs appear tiny even though I've adjusted their width to 32% each?

I am trying to display three gifs in a row, each taking up one-third of the width of the page. However, when I preview the page, the gifs appear tiny. I have set the divs to 32% each and the gifs should fill 100% of their respective div. Here is the code s ...

htmlcss

Refreshing an iframe located on disparate domains

There is a webpage called "main.jsp" within the domain "domain1". This page contains an iframe that loads content from another domain known as "domain2". Essentially, "main.jsp" serves as a common content platform, with the iframe displaying content from v ...

javascripthtmljspiframe

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

javascripthtmljquery

Implementing css padding to text preceding images

My content includes text and images in a mix, and I wish to add CSS margin to elements that appear directly before and after the images. Unfortunately, the placement of these elements can vary and is beyond my control. The code snippet below demonstrates ...

htmlcss

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

javascriptcssreactjsmaterial-ui

Attempting to extract content from a specific span element

I've been struggling to extract the text within a <span> element from a webpage. Every attempt I've made that doesn't result in an error has come back empty, with no output whatsoever. Here is the code I'm using: import time imp ...

pythonhtmlpython-3.xseleniumweb-scraping

Adjusting the size of div content without changing its dimensions

I'm in search of a solution for resizing the contents within a fixed width and height div. Currently, my div looks like this: <div id="editor_preview" style="width:360px !important; color:gray; ...

javascriptjquerycsshtml

Exploring html select and input elements in a loop

Currently, I am in the process of developing an application that calculates the total price of selected items based on user input. Each row consists of two dropdown menus (ID/item) and a quantity input field. Additionally, users have the option to add rows ...

javascriptjqueryhtml

Automated line wrapping within a div

My goal is to showcase images within a unique div structure. Currently, the arrangement appears as follows: It seems that the green divs are extending beyond their parent div (the black one). This is how it's structured: <div class="photoView c ...

jqueryhtmlcssangularjs

Adjust the width of the button to best fit the content or label

Here we have a screenshot of HTML source code showing a button that is wider than the content it contains. The highlighted area in yellow indicates there is extra space at the right side of the button due to it being displayed on multiple lines. Is this be ...

htmlcssbuttonangular-material-table

Issue with HTML not being displayed during Eclipse Eclipse html not showing up on

This is an example of a servlet: package userInterface; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servle ...

htmleclipsejsp

Locator for finding compound text within a div class using Selenium WebDriver

I am struggling to select a specific button in the UI that shares similarities with other elements. Below is the code snippet for the button in question: <div class="ui green ok inverted button"> <i class="checkmark icon"></i> Yes </d ...

htmlcssseleniumxpathwebdriver

Tips for avoiding cropped images on mobile websites:

I recently created a website that looks perfect on desktop but appears cropped on mobile devices. The site in question is doc.awsri.com Here are the images causing the issue: https://i.stack.imgur.com/eRJXU.png The problem arises when viewing it on a ph ...

javascriptjqueryhtmlcssimage

Revise directive following the dynamic addition of elements

My Objective: I aim to utilize directives for creating custom elements and dynamically inserting them into the view at various points in time. The Challenge: Upon dynamically adding custom elements to the view, they appear as raw HTML without the directi ...

javascriptjqueryhtmlangularjsangularjs-directive

Elevate the index of the name attribute for an input field within a dynamically generated form

In my scenario, I have created a form that includes indexed input fields for username and level: <form> <table> <tr class="trToClone"> <td> <label>Username:</label> <input type="text" name="usernam ...

javascriptjqueryhtmlforms

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss