Nested Lists ❺

Style Webflow's nested lists within rich text blocks

All of the code given here will be pasted directly into a <style> block within an Embed on the page containing your rich text block.

This allows you to customize it to your specific needs, and for it to work while you're in the designer.

Ordered List Styling

Basic Styling 1. A. a.

Suppose you want a basic ordered list, where the first level is decimal, the second is uppercased letters and the third is lowercase letters.

This code will perform this to all ordered lists on your page.

<style>
ol[role="list"] {
  list-style-type: decimal;
}
ol[role="list"] > li > ol[role="list"] {
  list-style-type: upper-alpha;
}
ol[role="list"] > li > ol[role="list"] > li > ol[role="list"] {
  list-style-type: lower-alpha;
}
</style>

Technical Styling

Technical styling is a bit different, it's a sequence of numbers like 2.1.14 that indicidates a specific level of your list. We can achieve that in pure CSS as well using CSS counters.

Give your rich text element the class hierarchical-list. This can be a global class, an in addition to other classes on your list.

My code here;

• Will apply technical numbering to all ordered lists within your rich text element

• Will restart for each one

• Handles 3 levels only- you can make it deeper by continuing the same pattern

• Doesn’t apply any level-specific styling, but you can

• Works in the designer at design time, if the <style> chunk is in an embed rather than the before-/head custom code area.

<style>
.hierarchical-list > ol {
  counter-reset: level1;
}
.hierarchical-list ol {
  padding-left: 1.5em;
}
.hierarchical-list li {
  display: block;
  list-style: none;
}
.hierarchical-list > ol > li {
  counter-increment: level1;
}
.hierarchical-list > ol > li::before {
  content: counter(level1) ". ";
  font-weight: bold;
}
.hierarchical-list ol > li > ol {
  counter-reset: level2;
}
.hierarchical-list ol > li > ol > li {
  counter-increment: level2;
}
.hierarchical-list ol > li > ol > li::before {
  content: counter(level1) "." counter(level2) ". ";
}
.hierarchical-list ol > li > ol > li > ol {
  counter-reset: level3;
}
.hierarchical-list ol > li > ol > li > ol > li {
  counter-increment: level3;
}
.hierarchical-list ol > li > ol > li > ol > li::before {
  content: counter(level1) "." counter(level2) "." counter(level3) ". ";
}
</style>