What are the steps to properly create an ordered list?

.book-summary ol {
  counter-reset: item ;
}

.book-summary ol li {
  margin-left:10px;
  margin-top:5px; 
  display:block;
}

.book-summary ol li:before {
  content: counters(item, ".") " "; counter-increment: item; 
}
<div class="book-summary">
       
        <ol>
          <li>Component Location</li>
          <li>Special Tools</li>
          <li>Specifications
            <ol>
              <li>General Inforamation</li>
              <li>Engine</li>
              <li>CVT</li>
            </ol>
          </li>
          <li>Torque Specifications</li>
          <li>Troubleshooting</li>

          <li>cfs</li>
        </ol>
      </div>

I'm working on creating an ordered list that resembles a table of contents for a book. However, I've noticed that my first level list items only display the number ("1") without including a period ("1.") next to it.

How can I adjust my code so that there is a dot after each first level list item?

htmlcss

Answer №1

To create a structured list where the first level has a dot and the subsequent levels do not, you can use nested selectors like in the following example:

.book-summary ol {
      counter-reset: item ;
    }

    .book-summary ol li {
      margin-left:10px;
      margin-top:5px; 
      display:block;
    }
    .book-summary ol li:before {
      content: counters(item, ".") " "; counter-increment: item; 
    }
    .book-summary > ol > li:before {
      content: counters(item, ".") ". "; counter-increment: item; 
    }
<div class="book-summary">
       
        <ol>
          <li>Component Location</li>
          <li>Special Tools</li>
          <li>Specifications
            <ol>
              <li>General Inforamation</li>
              <li>Engine</li>
              <li>CVT</li>
            </ol>
          </li>
          <li>Torque Specifications</li>
          <li>Troubleshooting</li>

          <li>cfs</li>
        </ol>
      </div>

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

Invoking the HTML method from a WCF service

Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...

javascriptjqueryajaxhtmlwcf

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance

I'm facing a small issue with the MediaElement.js player. To access the player instance, I usually use the following code (which works in HTML5 compatible browsers): // Retrieve player this.playerId = $('div#shotlist-player video').att ...

javascriptjqueryhtmlhtml5-videomediaelement

Utilize the appendTo() function and make a switch to dynamically insert content stored in variables into a specified

I am working on developing a page with a central content div, where users have the ability to choose various options that will introduce different additional content. This added content will then present more opportunities for adding new elements, ultimate ...

javascriptjqueryhtmlcssdom

The checkValidity function fails to identify incorrect "tel" input

In my form, I am using the checkValidity function to validate inputs. However, I have encountered an issue where the validation only works when an input with the required attribute is missing a value. It doesn't work if there is a value type mismatch, ...

javascriptjqueryhtmlformsvalidation

Linking an image to a database-stored value through a hyperlink

My goal is to give users the option to link their social media accounts such as Facebook and Twitter, with each link displaying an image that corresponds to the platform. The intention is for these images to direct them to the links stored in the database. ...

htmlasp.net-mvc-3sql-server-2008-r2

Ensure that the height of the flex body is set to 100% within the ReactNative View

Within my React Native app, I have constructed the following view: <ScrollView style={{ width: 250, height: '100%', backgroundColor: '#000000' }}> <SafeAreaView style={{ flex: 1, flexW ...

htmlcssreactjsreact-native

Eliminating the issue of double scroll bars that overlap each other

Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, bot ...

htmlcss

Using a .NET Web-API controller variable as a parameter in a JavaScript function

I am looking to send a "variable" from the controller to a JavaScript function. The code I have implemented is as below: <div ng-controller="faqController"> <div ng-repeat="c in categories"> <h2 onclick="toggle_visibility(&apos ...

javascripthtml.netangularjsasp.net-web-api

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

CSS flexbox completely collapses all child elements that are empty

Is there a way to collapse the empty "col" divs in this html structure while keeping the content divs equally sized (two columns in this case)? * { box-sizing: border-box; } .container { border: 1px dashed rgba(255, 0, 0, .5); background-color: b ...

htmlcssflexbox

The iFrame that is generated dynamically becomes null when accessed from a page that has been loaded using JQuery

One issue I am facing is with a dynamically created iframe in regular javascript. It functions perfectly fine when called from a static page using conventional methods. However, when it is being called from a page loaded by jQuery, I encounter an error s ...

javascriptjqueryhtml

Do not engage with the website while animations are running

I'm working on a JavaScript project where I want to create textareas that grow and center in the window when clicked, and shrink back down when not focused. However, I ran into some issues with the .animate() function that are causing bugs. During QA ...

javascriptjquerycss

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

Creating unique URLs for websites can be accomplished by following these steps:

I am in the process of developing a website where content in the main div within the body section can be replaced. However, I have realized that all content will end up on the same URL. Any suggestions on how to fix this? HTML/PHP(index.php): <htm ...

javascriptphphtmlurlweb

Div element positioned outside of another div element

I hate to bug you with more css issues, but I'm really struggling with this one. The problem I'm facing is that a sub div is overflowing the boundaries of its parent div. I tried using: display: inline-block;` but then the outer div goes haywir ...

htmlcss

Troubleshooting HTML image visibility issues

I've been trying to get a Tumblr icon to display in the upper-right corner of my HTML-based page, but all I see when I open it in a browser is a white box with a gray outline. The code I'm using for the image is: <img style="float: right; mar ...

htmlcssimageicons

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

htmlcssbootstrap-4

Overlaying Div Concealed by Background Video Filter

Whenever we add a filter to our background video, the div overlay ends up moving behind the video and becoming hidden. To see an example of this issue, check out this fiddle showcasing the background video with the text overlay: https://jsfiddle.net/dyrepk ...

cssfilterwebkithtml5-video

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...

javascripthtmlcssnpmchart.js

I'm looking for assistance on programmatically adding or modifying the user-agent header in a Chrome browser using Selenium WebDriver. Can anyone help

Seeking assistance on programmatically adding or modifying the user-agent header for Chrome browser using Selenium WebDriver. File addonpath = new File("D:\\innpjfdalfhpcoinfnehdnbkglpmogdi_20452.crx"); ChromeOptions chrome = new ChromeOptions( ...

javajavascripthtmlseleniumtestng