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

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

css

An easy way to incorporate a fade-in effect for every word in a text

I am trying to make the text "Eat. Sleep. Repeat." slide up and fade in one word at a time. I have experimented with various methods like anime.js, keyframes, and adding css classes, but so far none of them have worked for me. Here is the code I currently ...

javascripthtml

Dynamic horizontal div elements laid out in a repeating pattern using CSS Grid

I'm fairly new to CSS/Html/JS and I'd like to create a row of Boxes (loaded from a json file) displayed horizontally. Something similar to this: Here's the code snippet I've been using: <style> .wrapper { display: grid; ...

htmlcsscss-grid

Utilize Vue.JS to showcase JSON information from an external file

Currently, I have a View.JS app that displays a conversation thread from a JSON file. The existing code appears as follows: const app = new Vue({ el: "#app", data: { messages:[ { name: "Support", message: "Hey! Welcome to suppo ...

javascripthtmljsonvue.jsvuejs2

The Google calendar integration is working, but the appearance leaves much to

I embedded a Google calendar, but I'm having trouble centering it on the page without it overflowing onto the top menu. Can you help me fix this issue? If you'd like to see what I'm referring to, you can visit this link: ...

htmlcssdreamweaver

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

Finding the class name of the parent div: A simple guide

Within a maze of nested divs, there lies a checkbox waiting to be deciphered. When the OnChange event triggers, I aim to unveil the hidden class name of the parent div/container div known as pan-box placeholder. The HTML journey begins with this structure ...

jqueryhtml

Using the Firefox API to determine if a tab is currently active

I remember hearing about a feature that was introduced in some recent versions of Firefox allowing developers to check if a tab is active or not using JavaScript. However, I am having trouble finding more information about it online. Can you share the li ...

javascripthtmlfirefoxbrowser

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

javascriptjquerycss

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

javascripthtmlcss

When data is submitted through the POST method, it mysteriously disappears

When I send the "user" variable to another page called Survey.php, here's how it looks: In the index.html file: <form action="Survey.php" method="post" name="frm"> <div><input type="text" name= ...

javascriptphphtmlformspost

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

I am looking for a way to color individual Tree Items in a treeView based on specific conditions. I found a promising answer, but unfortunately, I am struggling to implement it. You can check out the answer here. My main obstacle is understanding how to u ...

cssjavafxtreeview

Developing components through JavaScript

I am attempting to use JavaScript to create an element in my HTML using createElement, but there seems to be an issue in my code. HTML <button class="test_button">I am a test</button> <div class="test"></div> ...

javascriptcssvue.jscreateelement

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

javascripthtmlcss

What is the best way to connect information from an HTML input field to a JavaScript object with the help of AngularJS?

As a beginner in AngularJS, I'm struggling to find the best approach to achieve my goal. I aim to create a grid of input tags with type=number in my HTML and have it set up so that whenever the value is increased, a new object is added to a list. Simi ...

javascripthtmlangularjsionic-frameworkangularjs-bindings

Adjust the width of the graphics on both sides of the text based on the length of the text content

Is there a way to center an H1 tag between two graphics using CSS or jquery/javascript? The width of the H1 text will vary depending on the page. The dot on the left should remain at the edge of the site, and the line should extend to meet the edge of the ...

javascriptjqueryhtmlcss

CSS styling for a container element that enables word wrapping on child divs, while also being able to stretch to accommodate the width of its children

Is it feasible to create CSS that allows an element to support word-wrap:break-word, while also adjusting its width to fit the content when breaking is not possible? <html> <style> .outer { background-color:red; word-wrap:break-wor ...

csswebkitword-break

The use of the display property with inline-block is not functioning correctly on mobile devices

Can anyone help me figure out why my divs are displaying differently on PC versus phone? They line up well on the computer, but on the phone, the last div is on a new line. Here is a snippet of my code and screenshots for reference. Thank you in advance fo ...

htmlcss

The preceding sibling function may encounter issues when multiple child tags are present

In this case, the XPath used to locate the checkbox is as follows: //td[text()='bbbb vvvvvvvvv']/preceding-sibling::td/div/input[@class='hidden'] However, despite using this XPath, the input element is not being captured. Only the "//t ...

javahtmlseleniumselenium-webdriverxpath