Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
4 replies
jcayzac

Ordered list base styles: is there a better way?

OK, this works, but it's ugly. Is there a less ugly way to implement some default chain of styling decimal > letters > romans > decimal… ?

:where(ol) {
  list-style-type: decimal;
  &[type="A" s] {
    list-style-type: upper-alpha;
  }
  &[type="a" s] {
    list-style-type: lower-alpha;
  }
  &[type="I" s] {
    list-style-type: upper-roman;
  }
  &[type="i" s] {
    list-style-type: lower-roman;
  }

  :where(ol) {
    list-style-type: lower-alpha;
    :where(ol) {
      list-style-type: lower-roman;
      :where(ol) {
        list-style-type: decimal;
        :where(ol) {
          list-style-type: lower-alpha;
          :where(ol) {
            list-style-type: lower-roman;
            :where(ol) {
              list-style-type: decimal;
            }
          }
        }
      }
    }
  }
}
Was this page helpful?