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

Enhancing functionality through interactive buttons: optimizing the performance of this dynamic data code

I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...

phphtmlmysql

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment

how to toggle a pre-selected checkbox in a Vue component

https://i.stack.imgur.com/6GQl7.png When dealing with a tree view checkbox in Vue, I encountered an issue where editing data within a selected zone should automatically check the corresponding countries based on previous selections. The ID of the selected ...

htmlsqllaravelvue.js

Customizing the date-select widths: A step-by-step guide

I've been struggling with adjusting the width of different instances of this line: <%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %> Despite creating unique ids for select, d ...

htmlcssdate

What causes absolute positioning to separate each word onto its own line? Is there a solution to this issue?

Why does each word in a child element (class .second) get wrapped onto a new line when using absolute positioning? Is there a way to keep the parent element (class .first) as a round shape, while also ensuring the child element is centered below it and has ...

htmlcsslayout

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

htmlcsssvg

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

htmlcss

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...

htmlcsssass

Setting a parent for CSS selectors in Material UI: A step-by-step guide

Currently, I am in the process of developing a Chrome Extension that incorporates Material UI. By using the inject method, the extension is able to apply all of the Material UI styles seamlessly. I have been contemplating the idea of adding a parent selec ...

cssgoogle-chrome-extensionmaterial-uijss

What is the best way to prevent right floated DIVs from interfering with each other's positioning, specifically within a specified space?

Despite feeling like this question may have been asked numerous times before, I've searched high and low for an answer to no avail - both here and on Google. My HTML page has a maximum width that limits the size of the content. This content includes ...

javascripthtmlcss

"Displaying mongoose date in the HTML5 input type date format (dd/mm/yyyy) is a simple process that can

I have a structured data in MongoDB as shown below: var Person = new Schema({ "Name": { type: String, required: true }, "DOB": { type: Date, "default": Date.now } }); An instance of this schema is created using NodeJs with mongoose ODM: { "N ...

node.jshtmlmongodbmongoosehandlebars.js

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Determining the top element displayed in a div: A guide

Looking for an answer on how to determine the top visible element while scrolling? You may find some insights in this post: (Check if element is visible after scrolling). My scenario is slightly different - I have a scrollable div containing multiple ele ...

javascriptjquerycssangularjs

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui

A pop-up window displaying an electron error message appears, but no errors are logged in the console

In a Nutshell: While developing a single-page website with Electron, I encountered the common issue of jQuery not being globally accessible. To tackle this problem, I decided to simplify it by using a quick start example, but unfortunately, I'm strugg ...

javascripthtmljqueryelectron

Utilize a variable within an HTML attribute

Currently utilizing Angular and I have the following HTML snippet <input onKeyDown="if(this.value.length==12 && event.keyCode!=8) return false;"/> Is there a way for me to incorporate the variable "myNum" instead of the ...

javascripthtmlangular

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

javascripthtmlreactjsrender

Is there a way to make the header reach the full width of the page?

Is there a way to make my header extend across the entire page? I attempted using margin-left and right, but it didn't yield the desired outcome. Header.css .header{ background: green; height: 70px; width: 100%; display: flex; ju ...

javascripthtmlcssreactjsmaterial-ui

How about this: "Using jQuery, we detached the element with the class 'myClass', then cloned it. But wait, where did my nested table go?"

I'm facing an issue where I have a div containing a table that I want to reuse for multiple entries in a JSON database. <div class="myButton"> <table> <tr id="currentVersion"> ...

jqueryhtmlclone

Create two grid components for Material-UI and use Flexbox to ensure that both items have equal height

I'm currently working on ensuring that two grid items have the same height using flex in Material UI, but I've hit a roadblock. It seems like my approach with the Grid element might be incorrect. I've experimented with adjusting the height a ...

htmlcssreactjsreduxmaterial-ui