1. Home
  2. Blog
  3. CSS: How to Make Ordered Lists with Numbers and Letters

CSS: How to Make Ordered Lists with Numbers and Letters

  • By Jess Brown | Jul 24, 2018
CSS: How to Make Ordered Lists with Numbers and Letters

Lots of stakeholders use Word, Google Docs, or some other word processor to type up the content for a web-page. Sometimes the "styles" from those word processors don't appear by default on the web. One such example is with ordered lists, switching from numbers to letters.

Example

  1. First item
    1. First sub-item
  2. Second item
  3. Third item
    1. Third sub-item 1
    2. Third sub-item 2

CSS solution

ol > li > ol {list-style-type: lower-alpha;}

It's way easier to maintain and update by using ordered lists (<ol></ol>) instead of trying to type the numbers/letters by hand, and now you've got a quick trick to add to your CSS snippets.