Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?

by

You can use counters to do so:

The following style sheet numbers nested list items as “1”, “1.1”, “1.1.1”, etc.

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

Example 

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

See Nested counters and scope for more information.

More Related Contents:

  1. Blank Space To Right Of Webpage? (Hidden min-width?) [closed]
  2. div 100% width with other div fixed
  3. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  4. CSS: Width in percentage and Borders
  5. Twitter Bootstrap 3 Sticky Footer
  6. Removing whitespace between HTML elements when using line breaks
  7. CSS set background-image by data-image attr
  8. Stretch text to fit width of div
  9. Is it possible to use text-overflow:ellipsis on multiline text?
  10. How to stop text from taking up more than 1 line?
  11. What’s the difference between flex-start and baseline?
  12. Scroll particular DIV contents with browser’s main scrollbar
  13. Can I stop 100% Width Text Boxes from extending beyond their containers?
  14. Inline tags vs. inline css properties
  15. CSS horizontal centering of a fixed div?
  16. Giving a border to an HTML table row,
  17. Font Awesome icons are not working, I have included all required files [closed]
  18. Half circle with CSS (border, outline only)
  19. Flexbox resize and scrollable overflow [duplicate]
  20. How do I make Firefox auto-refresh on file change?
  21. Tooltip with HTML content without JavaScript
  22. Change color of one character in a text box HTML/CSS [duplicate]
  23. Second line in li starts under the bullet after CSS-reset
  24. Blank iFrame in IE
  25. How position absolute and fixed block elements get their dimension?
  26. Ring-shaped process spinner with fading gradient effect around the ring
  27. text-decoration not working for visited state link
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment